Vue如何按需引入element-plus

在开发过程中如果完整的引入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 组件

比如

<template>
  <el-row>
    <el-col :span="8">
      <el-button type="success">成功按钮</el-button>

      <el-progress :text-inside="true" :stroke-width="26" :percentage="74" />
    </el-col>
  </el-row>
</template>

<script>
import { ElButton } from "element-plus";
import { ElProgress } from "element-plus";

export default {
  components: {
    ElButton,
    ElProgress,
  },
};
</script>

注： 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"