解放双手！实现Element-plus自动按需导入

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

开始

本篇文章教大家一种全新的按需导入element-plus的方法，不同于传统的按需导入，这种全新的按需导入可以说是真正的解放双手，配置起来也是超级简单。有的小伙伴在安装导入element-plus的时候可能会报错，可以看一下我的另一篇博客vue3引入element-plus报错解决方案

划重点：是自动按需导入，自动，不是手动按需导入

手动按需导入

我们先来演示下传统的手动按需引入，就是在每个需要使用组件库的页面按照三步引入、注册、使用，每使用一个组件，就要这三步，真是相当的麻烦。

自动按需导入

自动当然就是什么都不用干了，我们先看一下element-plus的官方文档，官方也是推荐这种方式的

我们按照图示的方法做一下

1、安装unplugin-vue-components和unplugin-auto-import

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

2、配置vue.config.js

这里只说一下webpack的方式，vite方式可以自己去看一下官方文档。

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = {
  lintOnSave: false,// 关闭语法检查
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
};

之前版本好像会生成auto-import.d.ts和components.d.ts，但现在好像是没有了。总的来说，我们就只改动一个vue.config.js

注意：当我们改了vue.config.js配置时，要关掉之前的项目，重新npm run serve，才能生效。

到这，我们就配置好了。 你没听错，到这结束了，是不是超级简单

然后我们来试验一下，这里，我没有在main.js引入element-plus，也没有在App.vue做相关的引入。

最后

本篇文章只是讲了下element-plus的自动按需导入，好像ant design vue、Vant等流行组件库都是可以的，大家可以自行地去研究下。