vue3+vite使用element plus自动按需导入

用vue3+vite+ts搭建一个后台管理的基础架子

element plus自动按需导入,依次下载

yarn add element-plus

yarn add unplugin-vue-components unplugin-auto-import -D

在页面上使用图标还是需要import引入对应的图标
在页面上使用图标还是需要import引入对应的图标

yarn add @element-plus/icons-vue

main.ts

import 'element-plus/dist/index.css';// element plus样式
import * as ElIcons from '@element-plus/icons-vue' //element plus图标

const app = createApp(App);
// 全局注册element-plus图标
for (const name in ElIcons) {
  app.component(name, (ElIcons as any)[name]);
}

app.mount('#app');

vite.config.ts

// element plus按需导入
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(),
    // element plus按需导入
    AutoImport({
      resolvers: [
        //自动导入element plus相关函数
        ElementPlusResolver()
      ]
    }),
    Components({
      resolvers: [
        //自动导入element plus组件
        ElementPlusResolver()
      ]
    })
  ],
})