多 UI 组件库供选择
Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。
安装插件
bash
yarn add vite-plugin-style-import -D
yarn add unplugin-vue-components/vite -D使用组件库
nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载
在 config/vite/plugins/styleImport.ts 设置
javascript
// 按需加载样式文件
...
createStyleImportPlugin({
resolves: [NutuiResolve()],
}),
...项目在 src/plugins/nutUI.ts 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
javascript
// 按需全局引入nutUI组件
import Vue from "vue";
import { Button, Cell, CellGroup } from "@nutui/nutui";
export const nutUiComponents = [Button, Cell, CellGroup];
// 在main.ts文件中引入
nutUiComponents.forEach((item) => {
app.use(item);
});vant 和 varlet 可以使用组件按需加载
在config/vite/plugins/component.ts下
javascript
import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
...
resolvers: [VantResolver(), VarletUIResolver()],
...不需要某个组件库
nutUI 需删除src/plugins/nutUI.ts和main.ts文件下的引入
vant 和 varlet 只需删除对应的 resolvers 即可
删除后需全局搜索删除不需要的组件，避免报错