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,}),],......
});
)
