更新记录

1.0.5（2025-09-28） 下载此版本

修复已知BUG

1.0.2（2025-09-28） 下载此版本

完成重构

1.0.4（2025-09-28） 下载此版本

去除无用代码

平台兼容性

uni-app(4.51)

uvui-ts

Vue3 + TypeScript 多平台快速开发的 UI 框架

📦 安装

npm install @toothdy/uvui-ts
# 或
yarn add @toothdy/uvui-ts
# 或
pnpm add @toothdy/uvui-ts

🚀 快速开始

完整引入

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import uvUI from '@toothdy/uvui-ts';

const app = createApp(App);
app.use(uvUI);
app.mount('#app');

按需引入

<template>
  <uv-button type="primary">按钮</uv-button>
</template>

<script setup lang="ts">
// 组件会自动注册，无需手动导入
</script>

配置组件自动注册

在你的项目 pages.json 文件中添加 easycom 配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uv-(.*)": "@/uv-ui/components/uv-$1/uv-$1.vue"
    }
  }
}

配置样式文件

在你的项目 App.vue 中引入核心样式：

<style lang="scss">
// 引入 uvui-ts 核心样式
@use '@/uni_modules/uvui-ts/index.scss';

@use '@toothdy/uvui-ts/index.scss';
</style>

在你的项目 uni.scss 文件中引入主题样式：

// 引入 uvui-ts 主题样式
@use '@toothdy/uvui-ts/theme.scss' as *;

使用工具函数

// 在 template 中直接使用
<template>
  <view>{{ $uv.test.mobile('***') }}</view>
</template>

// 在 script 中使用
<script setup lang="ts">
// 检查是否为手机号
const isMobile = uni.$uv.test.mobile('***')

// HTTP 请求
const response = await uni.$uv.http.get('/api/data')

// 路由跳转
uni.$uv.route.to('/pages/detail/index', { id: 1 })

// 防抖函数
const debouncedFn = uni.$uv.debounce(() => {
  console.log('执行防抖函数')
}, 300)
</script>

✨ 特性

1. 🎯 TypeScript 支持

• 完整类型定义：所有组件和工具函数都有完整的 TypeScript 类型定义
• 智能提示：开发时享受完整的代码提示和类型检查
• 类型安全：编译时发现潜在问题，提高代码质量

2. 🌐 全端兼容

• 多平台支持：H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、App（Vue/nvue）
• 自适应组件：组件会根据不同平台自动适配样式和功能
• 平台差异抹平：底层处理各平台差异和兼容性问题

3. 🛠️ 现代化开发体验

• Vue 3 Composition API：基于最新的 Vue 3 语法开发
• Vite 构建：快速的开发和构建体验
• SCSS 支持：使用现代 SCSS 编译器，支持 @use 语法
• ESLint + Prettier：统一的代码风格和质量保证

4. 🔧 强大的工具库

内置丰富的工具函数，开箱即用：

• HTTP 请求：基于 luch-request 的网络请求库
• 路由管理：简化的路由跳转和参数传递
• 表单验证：常用的验证规则函数
• 颜色处理：颜色转换和渐变计算
• 防抖节流：性能优化工具函数
• 日期处理：基于 dayjs 的日期工具

📁 项目结构

src/uv-ui/
├── components/           # UI 组件 (90+ 个组件)
│   ├── uv-button/       # 按钮组件
│   ├── uv-input/        # 输入框组件
│   ├── uv-modal/        # 模态框组件
│   └── ...              # 更多组件
├── libs/                # 工具库
│   ├── config/          # 配置文件
│   ├── css/             # 样式文件
│   ├── function/        # 工具函数
│   ├── hooks/           # Vue 3 Hooks
│   ├── luch-request/    # HTTP 请求库
│   └── utils/           # 通用工具
├── index.ts             # 入口文件
├── index.d.ts           # 类型声明文件
├── package.json         # 包配置
└── README.md            # 说明文档

🔨 工具函数

HTTP 请求

// GET 请求
const response = await uni.$uv.http.get('/api/users');

// POST 请求
const result = await uni.$uv.http.post('/api/users', {
  name: 'John',
  age: 25,
});

// 请求拦截器
uni.$uv.http.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  error => Promise.reject(error)
);

路由管理

// 基本页面跳转 (默认 navigateTo)
uni.$uv.route('/pages/detail/index', { id: 1 });

// 高级配置跳转
uni.$uv.route({
  type: 'navigateTo',
  url: '/pages/detail/index',
  params: { id: 1 },
  animationType: 'slide-in-right',
  animationDuration: 300,
});

// 替换当前页面
uni.$uv.route({
  type: 'redirectTo',
  url: '/pages/login/index',
});

// 关闭所有页面并跳转
uni.$uv.route({
  type: 'reLaunch',
  url: '/pages/home/index',
});

// 跳转到 tabBar 页面
uni.$uv.route({
  type: 'switchTab',
  url: '/pages/tabbar/home',
});

// 返回上一页或多级页面
uni.$uv.route({
  type: 'navigateBack',
  delta: 2,
});

表单验证

// 手机号验证
uni.$uv.test.mobile('***'); // true

// 邮箱验证
uni.$uv.test.email('test@example.com'); // true

// 身份证验证
uni.$uv.test.idCard('110101199003070134'); // true

颜色处理

// 颜色渐变
const gradient = uni.$uv.colorGradient('#ff0000', '#0000ff', 10);

// 十六进制转 RGB
const rgb = uni.$uv.hexToRgb('#ff0000'); // [255, 0, 0]

// RGB 转十六进制
const hex = uni.$uv.rgbToHex(255, 0, 0); // '#ff0000'

防抖节流

// 防抖函数
const debouncedFn = uni.$uv.debounce(() => {
  console.log('防抖执行');
}, 300);

// 节流函数
const throttledFn = uni.$uv.throttle(() => {
  console.log('节流执行');
}, 1000);

组件列表

下表为 uvui-ts 的组件清单，所有组件都经过 TypeScript 重构，支持完整的类型定义。

⚠️ 重要：tsconfig.json 配置

为了获得完整的智能提示，你的项目 tsconfig.json 必须包含以下配置：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ESNext"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

关键配置说明：

• "moduleResolution": "bundler" - 必须设置，否则无法识别 uvui-ts 组件类型
• "module": "ESNext" - 支持现代 ES 模块语法
• "target": "ESNext" - 编译目标为最新 ES 标准
• "include" - 指定 TypeScript 编译包含的文件类型，确保 .vue 文件被正确处理

⚠️ 注意：

• 缺少 "moduleResolution": "bundler" 将导致组件无智能提示
• 需要 TypeScript 4.7+ 版本支持
• 适用于 Vite、Webpack 等现代构建工具

🔗 链接

• 官方文档
• 演示地址
• 更新日志
• Gitee 仓库
• NPM 包

💬 交流反馈

欢迎加入我们的 QQ 群交流反馈：

uvui-ts 官方群：***

📄 开源协议

遵循 MIT 开源协议，意味着您无需支付任何费用，也无需授权。

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

🙏 致谢

感谢所有为 uvui-ts 做出贡献的开发者们！

注意：本项目基于 uv-ui 1.x 版本改造而来，感谢原作者的开源贡献！