import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1731315864000}'),o={name:"guide/vue3/ui.md"},p=l(`

多 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 即可

删除后需全局搜索删除不需要的组件，避免报错

参考文档 ​

`,19),e=[p];function t(r,c,i,y,D,C){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};