你是个成熟的代码要学会自己按需引入了

一. 前言

前端小伙伴儿们是不是经常遇到ui组件全局引入导致体积太大，按需引入导致不断手写会很麻烦。所以，当当！今天我们来让代码自己按需引入，解放前端小伙伴儿们的生产力，早日实现下班自由！（甲方：我要再改十个需求！）

二. 介绍

我们这里介绍的是unplugin-vue-components。该组件是由vue核心开发成员antfu开发的，尤大也是推荐的，且是该项目的金牌赞助商。

该组件主要是为了实现vue项目的组件自动引入。

官方文档：antfu/unplugin-vue-components

三. 完整案例

此处我们以vite为例，来主要看一下其对于自定义组件和UI库组件的自动按需引入。

源码：https://github.com/Kuari/Blog/tree/master/Examples/unplugin_auto_import

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。

四. 最后

手动按需导入是不可能手动按需导入的，这辈子都不可能了/狗头。

毕竟是大佬开发的强力工具，希望前端小伙伴儿们早日实现下班自由。

hunter-ji / Blog