前言：本文主要介绍 vue3.2 及 vite2.7 下，naive ui 和 antDesign vue 的按需自动引入，适用于 JavaScript 和 TypeScript
antDesign vue 的按需自动引入和 naive ui 的按需自动引入是一样的，所以本文就以 naive ui 的自动引入为主进行介绍。
0.首先是框架的安装
// naive ui 的安装npm i -D naive-uinpm i -D vfonts
// antDesign的安装npm install ant-design-vue@next --save
复制代码
1.安装 unplugin-vue-components 插件
naive ui 官网并没有给出自动引入的操作，但是前段时间我在进行 element plus 的自动引入操作时，发现了这个插件，查看这个插件仓库，发现这个插件可以完成好几个组件库的自动引入https://github.com/antfu/unplugin-vue-components
npm i unplugin-vue-components -D
复制代码
2.在 vite.js/vite.ts 中配置：
import Components from 'unplugin-vue-components/vite'
// 进行naive ui 的自动引入只需要下面这句import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
// 若是要进行antDesign vue的自动引入，则只需要使用下面这句// import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
plugins: [ ... Components({ resolvers: [ // naive ui 的自动引入，只需要这一句 NaiveUiResolver() // AntDesign vue 的自动引入，只需要这一句 // AntDesignVueResolver() ] }), ... ]
复制代码
自此，naive ui/antDesign vue 的自动引入便完成了，得益于 vue3.2 的 script setup 语法糖，在任意的 SFC 页面可以直接使用相应的组件而不用再单独 import 了，例如：
<template> <n-button>Default</n-button> <n-button type="tertiary">Tertiary</n-button> <n-button type="primary">Primary</n-button> <n-button type="info">Info</n-button> <n-button type="success">Success</n-button> <n-button type="warning">Warning</n-button> <n-button type="error">Error</n-button></template>
<script setup> // 不需要再引入相应的组件了，插件会自动引入使用到的组件</script>
<style></style>
复制代码
附言：推荐两款我常用的 vite 插件：
// 介绍rollup-plugin-visualizar // 自动打开打包报告vite-plugin-compression // 是否开启压缩
// 安装npm i -D rollup-plugin-visualizarnpm i -D vite-plugin-compression
复制代码
之后，在 vite.config.js/vite.config.ts 中对该插件进行如下配置：
vite插件配置
在示例中，我只使用了 naive ui 的 button 和 input 组件，下面是两种引入方式的打包报告：
naive ui 全部引入
naive ui 按需自动引入
评论