Vue自动按需引入ElementPlus

官方文档: element-plus.org/zh-CN/

安装ElementPlus

npm install element-plus --save
# 如果报错code ERESOLVE执行下面的指令
npm install element-plus --save --legacy-peer-deps
# --save和-S都可以

安装制动导入插件

npm install -D unplugin-vue-components unplugin-auto-import
# 如果报错code ERESOLVE执行下面的指令
npm install -D unplugin-vue-components unplugin-auto-import --legacy-peer-deps

编写配置文件

vite ===> vite.config.js

webpack ===> webpack.config.js

vue-cli ===> vue.config.js

// vite.config.ts
import { defineConfig } from 'vite'
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({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

// vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
}

报错解决

如果报错TypeError: AutoImport is not a function

检查插件版本

npm list unplugin-auto-import

回退插件版本

npm install unplugin-auto-import@0.16.1

如果报错 TypeError: Components is not a function

回退插件版本

npm install unplugin-vue-components@0.25.2

自动导入Icon图标

安装图标
```
 npm install @element-plus/icons-vue
```
安装依赖
```
npm i -D unplugin-icons unplugin-auto-import
```
如果之前配置ElementPlus组件为“按需导入”，那就只用下unplugin-icons。

最新版本的unplugin-icons可能会出现问题0.14.1可用

修改配置文件

// 导入包
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  // 添加自动导入配置
  plugins: [
    AutoImport({
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
 })

Vue自动按需引入ElementPlus及icons

Vue自动按需引入ElementPlus

自动导入Icon图标