uView Pro
UI 库基于 uView 1.8.8 用 TypeScript 完全重构的 uni-app Vue3 UI 框架。80+ 高质量组件，支持暗黑模式、国际化、多主题系统，全面兼容微信/支付宝/百度/抖音/QQ 小程序 + H5 + App + 鸿蒙。
UI组件库uni-appVue3TypeScriptuView暗黑模式国际化鸿蒙
详细文档
uView Pro#
平台概述#
uView Pro 是基于 uView 1.8.8 使用 TypeScript 完全重构的 uni-app Vue3 UI 框架。作为 uView 生态的现代化继承者，它保留了 uView 组件丰富的功能特性，同时引入了 TypeScript 原生编写、Vue3 Composition API、暗黑模式、国际化等现代特性。
核心价值：uView 是 uni-app 生态最早也是最流行的 UI 框架之一，但其 Vue2 版本已无法满足现代开发需求。uView Pro 通过 TypeScript 重构，在保持 API 兼容性的同时，提供了端到端类型安全、Vue3 原生支持和鸿蒙生态适配。
项目数据（2026-08-01 核实）：
- GitHub：534⭐ / 51 forks
- npm：
uview-prov0.6.14，96 个版本（2025-08 至今） - 最近活跃：2026-07-31（高频迭代中）
- License：MIT
- 鸿蒙应用已上架华为鸿蒙应用市场
设计规范#
组件分类#
| 类别 | 组件数 | 代表组件 |
|---|---|---|
| 基础组件 | 15+ | Button / Icon / Image / Loading / Overlay |
| 表单组件 | 20+ | Input / Form / Picker / Calendar / Code / Switch |
| 布局组件 | 10+ | Row / Col / Grid / Tabs / Sticky / Skeleton |
| 导航组件 | 8+ | Navbar / Tabbar / BackTop / Steps |
| 反馈组件 | 10+ | Modal / Toast / Popup / Tooltip / Notify |
| 数据展示 | 10+ | List / Card / Tag / Badge / CountDown / Swiper |
| 工具函数 | 20+ | $u.route / $u.toast / $u.test / $u.timeFormat |
主题系统#
- SCSS 变量系统：通过
uni.scss定义主题色、字号、间距等设计令牌 - 暗黑模式：基于 CSS 变量自动切换，通过
theme.scss配置 - 多主题：支持自定义主题配色方案
- 国际化（i18n）：内置多语言支持，可扩展自定义语言包
安装方式对比#
| 特性 | npm 方式 | uni_modules 方式 |
|---|---|---|
| 安装命令 | pnpm add uview-pro | HBuilderX 插件市场一键导入 |
| 更新方式 | pnpm update | HBuilderX 自动检测更新 |
| 路径引入 | uview-pro/theme.scss | @/uni_modules/uview-pro/theme.scss |
| easycom | 需配置 pages.json | 自动配置 |
| 适用场景 | Vite + CLI 项目 | HBuilderX 项目 |
审核规范#
不涉及（UI 组件库，不影响小程序审核流程）。
开发指南#
快速上手#
// 1. 安装
// pnpm add uview-pro
// 2. main.ts 中注册
import { createSSRApp } from 'vue';
import uViewPro from 'uview-pro';
import App from './App.vue';
export function createApp() {
const app = createSSRApp(App);
app.use(uViewPro);
return { app };
}
/* 3. uni.scss 中引入主题变量 */
@import 'uview-pro/theme.scss';
<!-- 4. App.vue 中引入基础样式 -->
<style lang="scss">
@import 'uview-pro/index.scss';
</style>
/* 5. pages.json 配置 easycom（npm 方式需要） */
{
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
}
}
}
<!-- 6. 使用组件 -->
<template>
<u-button type="primary" @click="handleClick">提交</u-button>
<u-form :model="formData" :rules="rules" ref="formRef">
<u-form-item label="姓名" prop="name">
<u-input v-model="formData.name" placeholder="请输入姓名" />
</u-form-item>
</u-form>
</template>
常见陷阱#
- npm 包名：安装时使用
uview-pro（无 @anyup 前缀），但 GitHub 仓库名是anyup/uView-Pro - easycom 配置路径：npm 方式和 uni_modules 方式的 easycom 配置路径不同，混用会导致组件找不到
- SCSS 引入顺序：
theme.scss必须在uni.scss中引入（变量定义），index.scss必须在App.vue中引入（基础样式），顺序错误会导致样式覆盖 - 鸿蒙兼容性：鸿蒙端部分组件（如 map、canvas）可能有差异，需真机测试
- 与 uview-plus 的区别：uview-plus（ijry）基于 uView 2.x fork，uView Pro 基于 uView 1.8.8 完全 TS 重构，两者 API 不完全兼容
从 uView 迁移#
| uView 1.x | uView Pro | 说明 |
|---|---|---|
<u-button> | <u-button> | API 基本兼容 |
this.$u.xxx | import { $u } from 'uview-pro' | 工具函数改为 import |
| Vue2 Options API | Vue3 Composition API | 需适配写法 |
| Less 样式 | SCSS 样式 | 样式文件后缀变化 |
| 无 TS 类型 | 原生 TS 类型定义 | 类型安全增强 |
生态资源#
uni-app Vue3 UI 库对比#
| 库 | Stars | 组件数 | TypeScript | 暗黑模式 | 说明 |
|---|---|---|---|---|---|
| uView Pro | 534 | 80+ | ✅ 原生 | ✅ | uView 1.x TS 重构 |
| wot-design-uni | 2277 | 70+ | ✅ 原生 | ✅ | 独立设计体系 |
| uview-plus | 712 | 60+ | ✅ | ❌ | uView 2.x fork |
| uni-ui | 2089 | 40+ | ❌ | ❌ | DCloud 官方 |
推荐搭配#
- 网络请求：alova（请求策略层，适配 uni-app）
- 状态管理：Pinia
- CSS 方案：UnoCSS + uView Pro SCSS 变量
- 项目脚手架：create-uni（uni-helper 社区脚手架）
社区资源#
- 官方文档：uviewpro.cn
- HBuilderX 插件市场：插件 ID 24633
- 鸿蒙应用：已上架华为鸿蒙应用市场（HarmonyOS 5.0+）
- QQ 交流群：811732166
- 微信交流群：见官网
版本更新#
当前状态（2026-08-01 核实）#
- GitHub：534⭐ / 51 forks
- npm：v0.6.14，96 个版本（2025-08 至今）
- 最近推送：2026-07-31
- 创建日期：2025-08-04
- 鸿蒙应用：已上架华为鸿蒙应用市场
迭代频率#
- 96 个 npm 版本（2025-08 至 2026-07），平均每月 8+ 个版本
- 近一年内从 v0.x 快速迭代，功能持续完善中
- 鸿蒙生态支持为最新亮点
核实记录#
- 2026-08-01：GitHub API + npm registry 核实，534⭐ / v0.6.14 / 96 versions / 最后推送 2026-07-31，状态极度活跃。uView Pro 作为 uView 生态的 Vue3 + TS 现代化方案，正在快速成长中。鸿蒙应用上架标志着其多端能力的成熟。
