# uvui-ts

**Repository Path**: toothdy/uvui-ts

## Basic Information

- **Project Name**: uvui-ts
- **Description**: uvui-ts 破釜沉舟之兼容vue3+2、app、h5、小程序等多端基于uni-app的生态框架，开箱即用，利剑出击
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-28
- **Last Updated**: 2025-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img alt="logo" src="https://www.uvuix.cn/common/logo.png" width="120" height="120">
</p>

<h3 align="center">uvui-ts</h3>
<h3 align="center">Vue3 + TypeScript 多平台快速开发的 UI 框架</h3>

<p align="center">
  <a href="https://gitee.com/toothdy/uvui-ts">
    <img src="https://gitee.com/toothdy/uvui-ts/badge/star.svg?theme=gvp" alt="Gitee Stars">
  </a>
  <a href="https://gitee.com/toothdy/uvui-ts">
    <img src="https://gitee.com/toothdy/uvui-ts/badge/fork.svg?theme=gvp" alt="Gitee Forks">
  </a>
  <a href="https://www.npmjs.com/package/@toothdy/uvui-ts">
    <img src="https://img.shields.io/npm/v/@toothdy/uvui-ts?color=brightgreen" alt="NPM Version">
  </a>
  <a href="https://www.npmjs.com/package/@toothdy/uvui-ts">
    <img src="https://img.shields.io/npm/dm/@toothdy/uvui-ts?color=blue" alt="NPM Downloads">
  </a>
  <a href="https://en.wikipedia.org/wiki/MIT_License">
    <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT License">
  </a>
</p>

## 项目简介

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

### ✨ 特点

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

### 📚 组件分类

- **基础组件**：按钮、图标、文本、链接、图片等
- **表单组件**：输入框、选择器、开关、复选框、单选框等
- **数据展示**：列表、表格、标签、进度条、徽标等
- **反馈组件**：弹窗、提示、加载、空状态等
- **导航组件**：导航栏、标签页、步骤条等
- **布局组件**：栅格、间距、分割线等

- 📚 [官方文档](https://www.uvuix.cn) - 完整的组件文档和使用指南

## 快速开始

### 环境要求

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

### 安装组件库

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

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

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

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

### 配置组件库

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

```typescript
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');
```

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

```vue
<style lang="scss">
@use '@toothdy/uvui-ts/index.scss';
</style>
```

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

```scss
@use '@toothdy/uvui-ts/theme.scss' as *;
```

#### 4. TypeScript 类型支持（推荐）

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

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

#### 5. 配置组件自动注册

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

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

### 使用组件

在页面中直接使用组件：

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

## 🤖 智能助手

### uvui-ts-mcp - AI 开发助手

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

**在 Cursor 的 `mcp.json` 中配置：**

```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: 为您提供详细的表单组件使用示例...
```

### 开发调试

配置完成后，你可以启动不同平台的开发模式：

```bash
# H5 开发
npm run dev:h5

# 小程序开发
npm run dev:mp-weixin    # 微信小程序
npm run dev:mp-alipay    # 支付宝小程序
npm run dev:mp-baidu     # 百度小程序
npm run dev:mp-qq        # QQ小程序
npm run dev:mp-toutiao   # 字节跳动小程序

# App 开发
npm run dev:app-plus     # App
```

### 构建打包

```bash
# H5 构建
pnpm build:h5

# 微信小程序构建
pnpm build:mp-weixin

# 其他平台构建
pnpm build:mp-alipay   # 支付宝小程序
pnpm build:mp-baidu    # 百度小程序
```

## 技术栈

- **框架**：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

## 相关链接

- [📚 官方文档](https://www.uvuix.cn)
- [🎯 演示地址](https://h5.uvui.cn)
- [📦 NPM 包](https://www.npmjs.com/package/@toothdy/uvui-ts)
- [📝 更新日志](https://www.uvuix.cn/components/changelog.html)

## 开源协议

遵循 [MIT](https://en.wikipedia.org/wiki/MIT_License) 开源协议，意味着您无需支付任何费用，也无需授权。

## 问题反馈

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

- 提交 Issue
- 加入QQ群：[626076951](https://qm.qq.com/q/voWwgov6M0)

---

**注意**：uvui-ts 基于[uv-ui](https://www.uvui.cn)组件库重构，感谢作者[Lee](https://gitee.com/climblee)开源贡献！