mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-09-10 12:21:50 +08:00
38 lines
891 B
Markdown
38 lines
891 B
Markdown
# 多 UI 组件库供选择
|
|
|
|
Vite 构建工具，`使用 vite-plugin-style-import` 和 `unplugin-vue-components/vite` 实现按需引入。
|
|
|
|
## 安装插件
|
|
|
|
```bash
|
|
pnpm add unplugin-vue-components/vite -D
|
|
```
|
|
|
|
## 使用组件库
|
|
|
|
vant 、 varlet 和 nutUI 可以使用组件按需加载
|
|
|
|
在`config/vite/plugins/component.ts`下
|
|
|
|
```javascript
|
|
import { VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
|
|
import NutUIResolver from '@nutui/auto-import-resolver';
|
|
...
|
|
resolvers: [VantResolver(), VarletUIResolver(), NutUIResolver()],
|
|
...
|
|
```
|
|
|
|
## 不需要某个组件库
|
|
|
|
只需删除对应的 resolvers 即可
|
|
|
|
删除后需全局搜索删除不需要的组件，避免报错
|
|
|
|
## 参考文档
|
|
|
|
- [nutUI](https://nutui.jd.com/#/zh-CN/component/button)
|
|
|
|
- [vant](https://vant-contrib.gitee.io/vant/#/zh-CN)
|
|
|
|
- [varlet](https://varlet-varletjs.vercel.app/#/zh-CN/button)
|