vue 项目的福利插件 unplugin-vue-components

现在很多项目都使用了第三方UI组件库，如： Element UI 、 Ant Design Vue 、 View UI 、 Vuetify 等等。引入的方式分为 完整引入 和 按需引入 两种方式。

有些 UI 组件库的需要借助于 babel-plugin-import 插件，如 Ant Design Vue 使用方法如下（官方原文）：

如果你仅需要加载使用的组件，可以通过以下的写法来按需加载组件。

import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'ant-design-vue';

有些 UI 组件库可直接 import 需要的组件，如 ElementPlus 使用方法如下（官方原文）：

ElementPlus的 JS 代码默认支持基于 ES modules 的 摇树 tree shaking。

App.vue

 <template>
   <el-button> 我是 ElButton </el-button>
 </template>
 <script>
   import { defineComponent } from 'vue'
   import { ElButton } from 'element-plus'
   export default defineComponent({
     name: 'app'
     components: {
       ElButton,
     },
   })
 </script>

上面的方法 都需要额外的 import 需要的组件。

那有没有一种方式既能像 完整引入 那样配置和使用都简单，又能像 按需引入 那样减少构建文件的大小。答案是：有的，使用 unplugin-vue-components 这个插件就能做到。

刚开始还真没用明白，看了文档说是自动按需引入用的，可是打包后我的代码量并没有减少，后来排查了一下，原来是我的 main.ts 文件里面多了这两行代码：

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.min.css';

这里直接全量引入了，所以打包的时候 unplugin-vue-components 插件无法正确处理。最后只需要将这两行代码删除就可以了（原来这么简单，真香）。

目前 支持的UI组件库 有：Ant Design Vue 、 Element Plus 、 Element UI 、 Prime Vue 、 Vant 、 View UI 、 Vuetify 等等。

webpack 、vite 、 rollup 、 vue-cli 都是支持的，配置也几乎一样。具体可查看 官方文档 。

我的项目使用的是 Vite + Vue 3.0 + Ant Design Vue 2.0 ，所以只需要配置 vite.config.ts 文件即可：

import { defineConfig } from 'vite';
import ViteComponents from 'unplugin-vue-components/vite';
// 使用你所使用的UI组件库的 resolver
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  // ...
  plugins: [
    ViteComponents({
      resolvers: [
        AntDesignVueResolver(),
      ],
    }),
  ]
  // ...
});

只需要在 vite.config.ts 文件中配置 unplugin-vue-components 插件，不需要在其他地方引入 ant-design-vue 就可以像 完整引入 方式一样使用组件，如：

<template>
  <a-btn>该组件可直接使用</a-btn>
</template>

<script>
import { defineComponent } from 'vue'

// import { Button } from 'ant-design-vue' // 不需要这行
 
export default defineComponent({
  components: {
    // 'a-btn': Button // 不需要这行
  }
})
</script>

是不是觉得使用简单、配置也很简单！