uni-ui-plus
uni-ui 二次封装
## 介绍
uni-ui-plus 是对@dcloudio/uni-ui的二次封装，提供了更好的使用体验和更多的功能。
# 快速上手
## NPM方式
### 安装
```bash [pnpm]
pnpm add uni-ui-plus
```
```bash [yarn]
yarn add uni-ui-plus
```
```bash [npm]
npm install uni-ui-plus
```
### 配置
---
#### 组件导入
::: warning 注意
自动按需导入组件有 `unplugin` 和 `easycom` 两种方式，请勿混用~
:::
##### 推荐 unplugin方式
- 安装插件
> [@uni-helper/vite-plugin-uni-components](https://github.com/uni-helper/vite-plugin-uni-components)
::: code-group
```bash [pnpm]
pnpm add -D @uni-helper/vite-plugin-uni-components
```
```bash [yarn]
yarn add --dev @uni-helper/vite-plugin-uni-components
```
```bash [npm]
npm install -D @uni-helper/vite-plugin-uni-components
```
:::
- 配置插件
> vite.config.ts
```ts
import { defineConfig } from "vite";
import UniApp from "@dcloudio/vite-plugin-uni";
import UniComponents from "@uni-helper/vite-plugin-uni-components";
import { UpResolver } from "uni-ui-plus";
export default defineConfig({
// ...
plugins: [
// ...
// 确保放在 `UniApp()` 之前
UniComponents({
resolvers: [UpResolver()],
}),
UniApp(),
],
});
```
> 如果使用 `pnpm` 管理依赖，请在项目根目录下的
> `.npmrc` 文件中添加如下内容
```bash
shamefully-hoist=true # or public-hoist-pattern[]=@vue*
```
- 类型提示
> tsconfig.json（需要[IDE 支持](https://cn.vuejs.org/guide/typescript/overview.html#ide-support)）
```json5
{
compilerOptions: {
// ...
types: ["uni-ui-plus/global.d.ts"],
},
}
```
##### easycom方式
- 配置easycom
> pages.json（若原本已存在easycom字段，则添加easycom.custom字段中的内容）
```json5
{
easycom: {
autoscan: true,
custom: {
"^up-(.*)?-(.*)": "uni-ui-plus/components/$1$2/$1$2.vue",
"^up-(.*)": "uni-ui-plus/components/$1/$1.vue",
},
},
// ...
}
```
### 完成
---
> 配置完成，现在所有的组件都可以直接使用，它将自动完成按需导入
```html
主要按钮
主要按钮
```
## 组件列表
---
### Image
```html
```
---
### Skeleton
```html
```
---
### List
```html
{{ item.title }}
```