uni-ui-plus

uni-ui-plus

一个现代化的 uni-app 组件库

特性

• 多平台覆盖，支持微信小程序、支付宝小程序、H5、APP 等
• 使用 TypeScript 构建，提供良好的组件类型系统
• 支持国际化
• 支持修改 CSS 变量实现主题定制
• 支持暗黑模式

快速上手

详细说明见 快速上手。

安装

pnpm add uni-ui-plus

配置

方案 1：vite 自动引入

// src/resolvers/up-resolver.ts
import type { ComponentResolver } from '@uni-helper/vite-plugin-uni-components'
import { kebabCase } from '@uni-helper/vite-plugin-uni-components'

export function UpResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^Up[A-Z]/)) {
        const compName = kebabCase(name)
        return {
          name,
          from: `uni-ui-plus/components/${compName}/${compName}.vue`,
        }
      }
    },
  }
}

// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Components from '@uni-helper/vite-plugin-uni-components'
import { UpResolver } from '@/resolvers/up-resolver'

export default defineConfig({
  plugins: [
    Components({ resolvers: [UpResolver()] }),
    uni()
  ],
});

方案 2：easycom

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

Volar 支持

// tsconfig.json
{
  "compilerOptions": {
    "types": ["uni-ui-plus/global"]
  }
}

开源协议

本项目基于 MIT 协议。