# 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

logo

uvui-ts

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

Gitee Stars Gitee Forks NPM Version NPM Downloads MIT License

## 项目简介 **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 ``` #### 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 ``` ## 🤖 智能助手 ### 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)开源贡献!