发布于 2 个月前 ,更新于 2 个月前 vue,vite,webpack

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

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

两种引入方式的对比
对比项 完整引入 按需引入
打包文件大小 全量包,大 根据使用的组件数决定
配置 简单 vue2 需要 babel-plugin-import 插件
使用 全局组件 需要 import 引入
按需引入方法

有些 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 插件

那有没有一种方式既能像 完整引入 那样配置和使用都简单,又能像 按需引入 那样减少构建文件的大小。答案是:有的,使用 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>

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

© 2016 - 2021 BY 禾惠 粤ICP备20027042号