🚀 现代化的 uni-app 组件库

uni-ui-plus 是一个专为 uni-app 生态打造的现代化组件库，致力于提供：

• 🚀 开箱即用：零配置快速上手，简化开发流程
• 🎨 精美设计：遵循现代设计语言，提供优雅的用户体验
• 📱 全端兼容：完美支持 H5、小程序、App 等多端平台
• 🛠️ TypeScript：完整的类型定义，提供更好的开发体验
• 🎭 主题定制：灵活的主题系统，轻松实现个性化定制
• ⚡ 高性能：经过优化的组件实现，确保流畅的用户体验

📖 在线文档

使用你喜欢的包管理器安装：

# pnpm (推荐)
pnpm add uni-ui-plus

# yarn
yarn add uni-ui-plus

# npm
npm install uni-ui-plus

::: warning 注意 自动按需导入组件有 unplugin 和 easycom 两种方式，请勿混用~ :::

• 安装插件

  @uni-helper/vite-plugin-uni-components

  ::: code-group

  pnpm add -D @uni-helper/vite-plugin-uni-components

  yarn add --dev @uni-helper/vite-plugin-uni-components

  npm install -D @uni-helper/vite-plugin-uni-components

  :::

• 配置插件

  vite.config.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 文件中添加如下内容

  shamefully-hoist=true # or public-hoist-pattern[]=@vue*

• 类型提示

  tsconfig.json（需要IDE 支持）

  {
    compilerOptions: {
      // ...
      types: ["uni-ui-plus/global.d.ts"],
    },
  }

• 配置easycom

  pages.json（若原本已存在easycom字段，则添加easycom.custom字段中的内容）

  {
    easycom: {
      autoscan: true,
      custom: {
        "^up-(.*)?-(.*)": "uni-ui-plus/components/$1$2/$1$2.vue",
        "^up-(.*)": "uni-ui-plus/components/$1/$1.vue",
      },
    },
    // ...
  }

配置完成，现在所有的组件都可以直接使用，它将自动完成按需导入

<up-image :width="100" :height="100" src="https://www.123.com/a.jpg">
    <template #error>
      加载失败
    </template>
    <template #loading>
      loading
    </template>
  </up-image>