这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
一. 前言
前端小伙伴儿们是不是经常遇到ui组件全局引入导致体积太大，按需引入导致不断手写会很麻烦。所以，当当！今天我们来让代码自己按需引入，解放前端小伙伴儿们的生产力，早日实现下班自由！（甲方：我要再改十个需求！）
二. 介绍
我们这里介绍的是unplugin-vue-components。该组件是由vue核心开发成员antfu开发的，尤大也是推荐的，且是该项目的金牌赞助商。
该组件主要是为了实现vue项目的组件自动引入。
官方文档：antfu/unplugin-vue-components
三. 完整案例
此处我们以vite为例，来主要看一下其对于自定义组件和UI库组件的自动按需引入。
1. 创建项目
yarn create vite unplugin_auto_import --template vue
然后进入文件夹安装依赖。
cd unplugin_auto_import
yarn install
2. 安装unplugin-vue-components
yarn add -D unplugin-vue-components
3. 配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite' // 新增
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({ /* options */ }) // 新增
]
})
4. 自动引入自定义组件
我们默认模板创建的项目中，默认在App.vue中引入了./components/HelloWorld.vue。此处就可以来尝试下如何自动引入了。
在配置了unplugin-vue-components之后，现在只需要删除引入行（其实这时候打开vscode就会发现改行已经灰掉了），被删除行如下所示：
import HelloWorld from './components/HelloWorld.vue'
删除以后完整App.vue如下所示：
<script setup>
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
现在在命令行中运行yarn dev，再打开浏览器查看http://localhost:3000页面，是不是发现，哎？！居然引入了！（心中狂喜，要早日实现下班自由了）
5. 自动引入UI库组件
这里以element plus为例。
首先是安装element plus。官方文档也没说要装，我还以为内置呢，一直报错，有点懵逼，哈哈。
yarn add -D element-plus
引入element plus的resolver，此处编辑vite.config.js文件，修改后如下所示：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 引入ElementPlusResolver
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({resolvers: [ElementPlusResolver()]}) // 添加配置
]
})
那么现在神奇的事情来了，就可以直接使用UI库的组件了！
我们在App.vue中使用一个el-button组件试试。我们在App.vue中加入如下行：
<el-button type="primary">Kuari</el-button>
添加后App.vue上下代码如下：
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<el-button type="primary">Kuari</el-button>
</template>
现在，运行yarn dev，打开浏览器，可以看到，就直接可以使用UI库的组件了。
6. 打包
按需引入的功能并不是仅仅在开发时候的，在打包时，该组件也是Tree-shakable的，只会将你用了的组件打包。
按照当前教程所写的项目，当全局引入的时候，打包的dist文件夹为1.1MB，而使用该组件之后打包，其dist文件夹为202KB。
四. 最后
手动按需导入是不可能手动按需导入的，这辈子都不可能了/狗头。
毕竟是大佬开发的强力工具，希望前端小伙伴儿们早日实现下班自由。
