在开发过程中如果完整的引入element-plus,会导致后续的打包非常的臃肿,所以我们项目中使用了按需引入的方式。(我们项目是通过vue-cli方式创建的)
1. 安装插件
首先你需要安装 unplugin-vue-components
和 unplugin-auto-import
这两款插件
(详见官网)
npm install -D unplugin-vue-components unplugin-auto-import
2. 修改 vue.config.js 文件
const { defineConfig } = require("@vue/cli-service")
const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
}
})
通过以上两步处理,可以在项目中按需使用任意的UI 组件
注: webpack版本的 使用如下版本会报错,具体原因不知道
"unplugin-auto-import": "^0.9.1",
"unplugin-vue-components": "^0.19.9"
// 改用如下版本就好了
"unplugin-auto-import": "^0.5.11",
"unplugin-vue-components": "^0.17.11"