vue3 element-plus按需引入（vite）优雅用法

一、安装

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

二、vite.config.js里

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

export default defineConfig(() => {
	return {
		 plugins: [
	      vue(),
	      AutoImport({
	        resolvers: [ElementPlusResolver()],
	      }),
	      Components({
	        resolvers: [ElementPlusResolver()],
	      })
	    ],
	}
})

三、删除全局引入

如果之前你是全局引入，那么现在你可以把这些删掉了，因为Element-plus已使用按需引入，插件会自动挂载处理，无需引入即可在页面使用。（未全局引入请忽略）

这是我的main文件，没有element-plus的引入项；
按需引入的目的：

1. 减少打包后的体积（使用了哪些组件会自动按需引入，减少未使用而引入的组件）
2. 提升加载效率、减少打包的体积

import {
    createApp,
} from 'vue'
import '@assets/style/reset.css'
import '@assets/style/index.scss'
import App from './App.vue'
import router from './router'
import store from './store'
import svgRegister from '@assets/js/svgRegister';
import * as echarts from 'echarts';

const app = createApp(App);
app.use(router)
app.use(store)
svgRegister(app) // 封装svg组件
app.config.globalProperties.$echarts = echarts;
app.mount('#app')

四、icon的使用

icon组件还需单独再引入
import { Avatar, SwitchButton } from "@element-plus/icons-vue";
使用：<el-icon><avatar /></el-icon>

也可以在main.js里全局引入

import * as ElIcons from '@element-plus/icons-vue'

for (const name in ElIcons) {
    app.component(name, ElIcons[name])
}

使用：

<component is="图标的名称"></component>