@toothdy/uvui-ts

uvui-ts

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

✨ 特性概览

• 🎯 100+ 组件 - 覆盖移动端开发全场景的UI组件库
• 💪 TypeScript - 完整的类型定义，享受智能提示和类型检查
• 🌐 全端兼容 - H5、小程序、App多平台一套代码
• 🛠️ Vue3 + Composition API - 基于最新Vue3语法开发
• 🔧 强大工具库 - 内置60+工具函数，开箱即用
• 📱 响应式设计 - 自适应不同屏幕尺寸和设备
• 🎨 主题定制 - 支持深度主题定制和样式覆盖
• 🚀 性能优化 - 按需加载，体积小巧，性能卓越

📦 安装

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");

配置组件自动注册

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

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

在 vue 中使用

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

<script setup lang="ts"></script>

配置样式文件

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

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

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

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

使用工具函数

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

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

// 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>

🤖 智能助手

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

⚠️ 重要：tsconfig.json 配置

推荐配置（使用 @vue/tsconfig）

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

依赖安装：

npm install -D @vue/tsconfig@0.5.1
# 或
yarn add -D @vue/tsconfig@0.5.1
# 或
pnpm add -D @vue/tsconfig@0.5.1

基础配置（不使用 @vue/tsconfig）

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

关键配置说明：

• "extends": "@vue/tsconfig/tsconfig.json" - 继承 Vue 官方 TypeScript 配置（推荐）
• "moduleResolution": "bundler" - 必须设置，否则无法识别 uvui-ts 组件类型
• "module": "ESNext" - 支持现代 ES 模块语法
• "target": "ESNext" - 编译目标为最新 ES 标准
• "types": ["@dcloudio/types"] - uni-app 类型支持
• "include" - 指定 TypeScript 编译包含的文件类型，确保 .vue 文件被正确处理

⚠️ 注意：

• 推荐使用 @vue/tsconfig@0.5.1 版本获得最佳兼容性
• 缺少 "moduleResolution": "bundler" 将导致组件无智能提示
• 需要 TypeScript 4.7+ 版本支持
• 适用于 Vite、Webpack 等现代构建工具

🔗 链接

• 官方文档
• 演示地址
• 更新日志
• Gitee 仓库
• NPM 包
• MCP 智能助手

💬 交流反馈

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

uvui-ts 官方群：626076951

📄 开源协议

遵循 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 做出贡献的开发者们！

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