vite vue3 自动按需导入vue element-plus element-plus/icons

安装插件

其他安装方式：https://element-plus.gitee.io/zh-CN/guide/installation.html

# 组件库
npm install element-plus
# 图标库
npm install @element-plus/icons-vue
# 导入自动插件
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

修改vite

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
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({
      imports: ['vue', 'vue-router'],
      resolvers: [
        IconsResolver({
          prefix: 'Icon'
        }),
        ElementPlusResolver()
      ],
      dts: 'src/types/auto-import.d.ts'
    }),
    Components({
      resolvers: [
        IconsResolver({
          enabledCollections: ['ep']
        }),
        ElementPlusResolver()
      ],
      dts: 'src/types/auto-component.d.ts'
    }),
    Icons({
      autoInstall: true,
    }),
  ],
})

修复vscode ts提示

tsconfig.json

{
 "include": [
  //...
  "src/types/*.d.ts"],
 }