更新记录

1.2.2（2025-10-21） 下载此版本

1.修复富文本解析组件打包报错问题

1.2.1（2025-10-16） 下载此版本

完成重构

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

修复已知BUG

平台兼容性

uni-app(4.01)

uvui-ts

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

项目简介

uvui-ts 是一个基于 Vue3 + TypeScript 的多端 UI 组件库，本项目是其完整的使用示例和演示项目。

✨ 特点

• 🚀 Vue3 + TypeScript：使用最新的 Vue3 Composition API 和 TypeScript 开发
• 📱 多端兼容：支持 H5、微信小程序、支付宝小程序、App 等多个平台
• 🎨 丰富组件：包含基础、表单、数据展示、反馈、导航、布局等 6 大类组件
• 🔧 完整工具链：集成 Vite、Prettier、ESLint 等开发工具
• 📦 状态管理：使用 Pinia 进行状态管理

📚 组件分类

• 基础组件：按钮、图标、文本、链接、图片等

• 表单组件：输入框、选择器、开关、复选框、单选框等

• 数据展示：列表、表格、标签、进度条、徽标等

• 反馈组件：弹窗、提示、加载、空状态等

• 导航组件：导航栏、标签页、步骤条等

• 布局组件：栅格、间距、分割线等

• 📚 官方文档 - 完整的组件文档和使用指南

快速开始

方式一

环境要求

• Node.js >= 16
• pnpm >= 7 (推荐) 或 yarn/npm

安装组件库

在你的 UniApp 项目中安装 uvui-ts 组件库：

# 使用 pnpm (推荐)
pnpm add @toothdy/uvui-ts

# 或使用 yarn
yarn add @toothdy/uvui-ts

# 或使用 npm
npm install @toothdy/uvui-ts

方式二

通过 插件市场 安装

cli 创建的项目推荐使用 方式一

HBuiderX 创建的推荐使用 方式二

配置组件库

1. 在 main.ts 中引入组件库：

import { createApp } from 'vue';
import App from './App.vue';
// npm、yarn、pnpm 安装
// import uvui from '@toothdy/uvui-ts';

// 插件市场安装
import uvui from '@/uni_modules/uvui-ts';

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

2. 在 App.vue 中引入样式：

<style lang="scss">
// npm、yarn、pnpm 安装
// @use '@toothdy/uvui-ts/index.scss';

// 插件市场安装
@use '@/uni_modules/uvui-ts/index.scss';
</style>

3. 在 uni.scss 中引入主题变量：

/* npm、yarn、pnpm 安装 */
/* @use '@toothdy/uvui-ts/theme.scss' as *; */

/* 插件市场安装 */
@use '@/uni_modules/uvui-ts/theme.scss' as *;

4. TypeScript 类型支持（cli创建的项目）

为了获得更好的 TypeScript 类型提示，建议在 package.json 中使用固定版本的 @vue/tsconfig：

{
   "devDependencies": {
      "@vue/tsconfig": "^0.5.1"
   }
}

5. 配置组件自动注册

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

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

使用组件

在页面中直接使用组件：

<template>
   <view>
      <uv-button type="primary">主要按钮</uv-button>
      <uv-icon name="heart" color="red"></uv-icon>
   </view>
</template>

🤖 智能助手 (AI编辑器可用)

uvui-ts-mcp - AI 开发助手

为了提升开发体验，我们提供了专门的 MCP（Model Context Protocol）智能助手，可以在 Cursor 等 AI 编辑器中使用。

在 Cursor 的 mcp.json 中配置：

{
   "mcpServers": {
      "uvui-ts-mcp": {
         "command": "npx",
         "args": ["-y", "@toothdy/uvui-ts-mcp@latest"],
         "disabled": false
      }
   }
}

智能助手功能：

• 🔍 快速查询 - 智能查询组件属性、事件、方法
• 📝 代码示例 - 获取完整的使用示例代码
• 🛠️ 源码查看 - 直接查看组件源代码
• 📚 工具函数 - 查询 uni.$uv 工具函数详情
• 🚀 配置指南 - 获取安装配置指南

使用示例：

用户: "uv-button有哪些属性？"
AI: 使用智能助手为您查询uv-button的完整属性列表...

用户: "给我一个uv-form的使用示例"
AI: 为您提供详细的表单组件使用示例...

技术栈

• 框架：Vue 3.5.21 + TypeScript 5.9.2
• 构建工具：Vite 5.2.8 + UniApp 3.0
• 状态管理：Pinia 2.1.7
• UI 组件：uvui-ts (@toothdy/uvui-ts)
• 样式预处理：Sass 1.90.0
• 代码规范：ESLint + Prettier

相关链接

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

开源协议

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

问题反馈

如有问题或建议，请通过以下方式联系：

• 提交 Issue
• 加入Q：[](https://qm.qq.com/q/voWwgov6M0)

注意：uvui-ts 基于 uv-ui 组件库重构，感谢作者 Lee开源贡献！