开放代码社区 › uView-Pro
uView-Pro
开发工具HTML/CSSuni-app Vue3 多平台快速开发的 UI 框架 uni-app x 版 uView Pro 重构意见征集中 ：组件优先级、API 设计、破坏性变更策略等你的建议会影响新版本方向 → 前往 Discussions 置顶帖参与讨论 uView UI，是 uni-app 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。 uView Pro，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，已覆盖 Android、iOS、鸿蒙以及微信/头
仓库地址
https://gitee.com/anyup/uView-Pro.gitREADME
<!-- 语言切换按钮 -->
<p align="right" style="margin-top: 10px;">
<a href="https://gitee.com/anyup/uView-Pro/blob/master/README.en.md" style="padding: 6px 16px; background: #2979ff; color: #fff; border-radius: 6px; text-decoration: none; font-weight: bold;">English</a>
<span style="padding: 6px 16px; background: #ededed; color: #333; border-radius: 6px; margin-left: 8px; font-weight: bold;">中文</span>
</p>
<p align="center">
<img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo-new.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
<h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
<div align="center">
[](https://gitee.com/anyup/uView-Pro)
[](https://gitee.com/anyup/uView-Pro)
[](https://github.com/anyup/uView-Pro)
[](https://github.com/anyup/uView-Pro)
[](https://github.com/anyup/uView-Pro/issues)
[](https://atomgit.com/anyup/uView-Pro)
[](https://www.npmjs.com/package/uview-pro)
[](https://www.npmjs.com/package/uview-pro)
[](https://uviewpro.cn)
[](https://nodejs.org/)
[](https://pnpm.io/)
[](https://en.wikipedia.org/wiki/MIT_License)
</div>
> 📣 **uni-app x 版 uView Pro 重构意见征集中**：组件优先级、API 设计、破坏性变更策略等你的建议会影响新版本方向 → **[前往 Discussions 置顶帖参与讨论](https://github.com/anyup/uView-Pro/discussions/182)**
## 说明
`uView UI`，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
`uView Pro`，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，已覆盖 Android、iOS、鸿蒙以及微信/头条/支付宝等主流小程序平台，真正实现“一套代码，多端运行”，支持多主题系统、暗黑模式与国际化（i18n）。
## [官方文档：https://uviewpro.cn](https://uviewpro.cn)
## [快速启动模板：https://starter.uviewpro.cn](https://starter.uviewpro.cn)
## 特性
- 兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
- 70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
- 众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
- 众多的常用页面和布局，让您专注逻辑，事半功倍
- 详尽的文档支持，现代化的演示效果
- 按需引入，精简打包体积
## 鸿蒙预览
🎉🎉 uView Pro 鸿蒙端应用已正式上线华为鸿蒙应用市场，为您提供完整的业务场景演示平台，包含组件库、模板示例、场景案例等，支持一键复制下载，帮助开发者快速上手并体验组件的实际应用价值！
> 系统要求：仅支持 HarmonyOS 5.0 及以上版本设备
<table>
<tr align="center">
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_harmony.png" width="180" height="180" ></td>
</tr>
<tr>
<td align="center"><strong>鸿蒙应用</strong><br>（浏览器扫码）</td>
</tr>
</table>
## 手机预览
您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
<table class="table">
<tr>
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="150" height="150" ></td>
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="150" height="150" ></td>
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="150" height="150" ></td>
<td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="150" height="150" ></td>
</tr>
<tr>
<td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
<td align="center"><strong>支付宝小程序</strong><br>（支付宝扫码）</td>
<td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
<td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
</tr>
</table>
运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
```bash
pnpm install
pnpm dev
```
更多运行和构建命令参考：[pnpm 运行指南](https://gitee.com/anyup/uView-Pro/blob/master/README-pnpm.md)
## 链接
- [Github](https://github.com/anyup/uview-pro)
- [Gitee](https://gitee.com/anyup/uview-pro)
- [AtomGit](https://atomgit.com/anyup/uView-Pro)
- [官方文档](https://uviewpro.cn)
- [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
## 交流反馈
`uView Pro` 微信交流群： [点击进入](https://uviewpro.cn/zh/resource/about.html)
`uView Pro` QQ 交流群： [点击进入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=98nSVDldWEbDdq4lxiP4aL7uATfMSlI6&authKey=G2yQJ5MQiKzMldaxBsIfKt17NuJuUw8Fr6zdKLggc6NZXgw4BVbqkU2U3EE994yd&noverify=0&group_code=811732166)
<table class="table">
<tr>
<td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-cl.png" width="250" height="345" ></td>
<td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
</tr>
<tr>
<td align="center"><strong>微信群</strong><br></td>
<td align="center"><strong>QQ群</strong><br></td>
</tr>
</table>
## 关于 PR
我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 `uView Pro` 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
## 安装配置
`uView Pro` 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 `easycom` 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
### 1. 安装 uView Pro
- npm 安装：
```bash
npm install uview-pro
# 或
yarn add uview-pro
# 或
pnpm add uview-pro
```
- uni_modules 安装：
通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
[插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
### 2. 引入 uView Pro 主库
在 `main.ts` 中引入并注册 uView Pro：
```js
import { createSSRApp } from 'vue';
// npm 方式
import uViewPro