Vue|按需引入ElementPlus组件

1、按需引入ElementPlus组件的优势

按需引入ElementPlus只会在需要的组件中引入相应的组件和样式，从而减小项目的体积。

2、按需引入的步骤

（1）安装ElementPlus和按需引入插件：

在项目终端，新建终端下（ctrl+shift+`）执行命令，除了添加Elementplus插件外，还要引入允许按需插入的插件，如：unplugin-vue-components ；unplugin-auto-import

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

（2）配置按需引入

在Vite配置文件中，添加对unplugin-vue-components和unplugin-auto-import插件的配置

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({
      //配置ElementPlus采用sass样式配色
      resolvers: [ElementPlusResolver()],
    }),
  ]

（3）测试

配置好后重启

npm run dev 

如果插件配置成功了的话，可在项目的‘package.json’文件中查看

案例测试：