更新记录

0.0.3(2025-08-06) 下载此版本

  • 添加插件使用示例工程

0.0.2(2025-08-04) 下载此版本

  • 60+精选组件,使用Vue3+TS全面重构,功能丰富,多端兼容,让您快速集成,开箱即用
  • 兼容安卓,iOS,微信小程序,H5 等
  • 详尽的文档支持,现代化的演示效果
  • 按需引入,精简打包体积

平台兼容性

uni-app(4.07)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
×

logo

uView Pro

uni-app Vue3 多平台快速开发的 UI 框架

star fork

说明

uView UI,是 uni-app 生态优秀的 UI 框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水。

uView Pro,是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架,uView Pro 的基线版本是基于 uView 1.8.8 修改,使用 TypeScript 完全重构,目前已全面支持 uni-app Vue3.0。

官方文档:https://uview-pro.anyup.cn/

特性

  • 兼容安卓,iOS,微信小程序,H5,QQ 小程序,百度小程序,支付宝小程序,头条小程序
  • 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
  • 众多贴心的 JS 利器,让您飞镖在手,召之即来,百步穿杨
  • 众多的常用页面和布局,让您专注逻辑,事半功倍
  • 详尽的文档支持,现代化的演示效果
  • 按需引入,精简打包体积

手机预览

您可以通过微信手机浏览器扫描以下二维码,查看最佳的演示效果。

微信小程序
(微信扫码)
H5
(浏览器扫码)
Android
(浏览器扫码)

运行示例工程,请下载源码后,在项目根目录执行以下命令:

pnpm install
pnpm dev

链接

交流反馈

uView Pro QQ 交流群: 点击进入

微信群
***

关于 PR

我们非常乐意接受各位的优质 PR,但在此之前我希望您了解 uView Pro 是一个需要兼容多个平台的(小程序、h5、iOS App、Android App)包括 nvue 页面、vue 页面。

所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!

安装

npm 安装

# npm 安装
npm install uview-pro

# yarn 安装
yarn add uview-pro

# pnpm 安装
pnpm add uview-pro

插件市场下载

https://p.dcloud.net.cn/plugin?name=uview-pro

快速上手

  1. main.ts引入 uView 库
// main.ts
import { createSSRApp } from 'vue';
import uViewPro from 'uview-pro';

export function createApp() {
    const app = createSSRApp(App);
    app.use(uViewPro);
    // 其他配置
    return {
        app
    };
}
  1. App.vue引入基础样式(注意 style 标签需声明 scss 属性支持)
/* App.vue */
<style lang="scss">
@import "uview-pro/index.scss";
</style>
  1. uni.scss引入全局 scss 变量文件
/* uni.scss */
@import 'uview-pro/theme.scss';
  1. pages.json配置 easycom 规则(按需引入)
// pages.json
{
    "easycom": {
        // uni_modules安装的方式需要前面的"@/",npm安装的方式无需"@/"
        // npm安装方式
        "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
        // uni_modules安装方式
        // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

请通过快速上手了解更详细的内容

使用方法

配置 easycom 规则后,自动按需引入,无需import组件,直接引用即可。

<template>
    <u-button>按钮</u-button>
</template>

请通过快速上手了解更详细的内容

捐赠 uView Pro

uView Pro 文档内容和框架源码基于 uView UI 二次开发,因此全部开源免费,如果您认为 uView Pro 帮到了您的开发工作,您可以捐赠 uView Pro 的研发工作,捐赠无门槛,哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

微信
支付宝

版权信息

uView Pro 遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将 uView Pro 应用到您的产品中。

鸣谢

再次感谢 uView UI 开发团队,以及所有为 uView UI 的贡献者,以及所有为 uView Pro 的贡献者。

隐私、权限声明

1. 需要申请的系统权限列表:

2. 采集的数据、发送的服务器地址、以及数据用途说明:

3. 是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议