vite中element plus按需引入

安装插件

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

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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: [
        vue(),
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
    ],
})

main.ts中不需要引入，用到的地方也不要手动引入，如果手动引入了就没有样式了，还需要在main.ts中引入样式，这不是想用的，项目中如果使用了如Elmessage，会在根目录中创建auto-imports.d.ts，代码中会自动添加使用的，但可能还会报错，提示没有引入


这时看项目中是否有tsconfig.json，如果没有创建一个，找到include

{
	"compilerOptions": {
		...
		"include": [
			"**/*.d.ts" // 如果这里是 "src/**/*.d.ts，去掉src/，因为添加的是在根目录中
		]
		...
	}
}