【element-plus】自动导入 + typescript 提示 + 自定义主题色

1、自动导入

2、引用加载组件类型提示

---

第一步：安装自动导入功能所需的插件 

npm install -D unplugin-vue-components unplugin-auto-import

 第二步：

vite版：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite' //必须
import Components from 'unplugin-vue-components/vite' //必须
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //必须
 
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({ //必须
      resolvers: [ElementPlusResolver()], //必须
    }), //必须
    Components({ //必须
      resolvers: [ElementPlusResolver()], //必须
    }), //必须
  ],
})

webpack版

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

第三步：使用组件库时获取ts类型提示 >  tsconfig.json 文件的 types 添加ts文件路径

编辑器安装 Volar 插件(新名字 Vue - Official)

{
    "compilerOptions": {
        "types": [
            "element-plus/global" //必须
        ],
    },
}

---

自定义主题色：本文使用的scss

1、 npm install -D sass unplugin-element-plus

2、 创建你自定义主题色的文件

/* 只需要重写你需要的即可 */
@forward "element-plus/theme-chalk/src/common/var.scss" with (
    $colors: (
        "primary": (
            "base": #ff0101,
        ),
        "success": (
            "base": #ff0101,
        ),
        "warning": (
            "base": #ff0101,
        ),
        "danger": (
            "base": #ff0101,
        ),
        "error": (
            "base": #ff0101,
        ),
        "info": (
            "base": #ff0101,
        ),
    )
);

3、配置 vite 自定义主题色的设置 【官方代码例子有问题。。。】

import { resolve } from "path";
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ElementPlus from "unplugin-element-plus/vite";
import vue from "@vitejs/plugin-vue";
 
 
export default defineConfig({
    ......
    css: {
        preprocessorOptions: {
            scss: {
                //你的主题文件路径
                additionalData: `@use "@/assets/style/element-plus/theme.scss" as *;`, 
            },
        },
    },
    plugins: [
        ......
        Components({
            // importStyle 必须！
            resolvers: [ElementPlusResolver({ importStyle: "sass" })],
        }),
        ElementPlus({
            // 必须！
            useSource: true,
        }),
    ],
    ......
});