【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的80+精选UI组件库

更新记录

0.3.8（2025-11-04）下载此版本

Build System | 打包构建

新增钉钉小程序运行和打包命令 (a5b4ab3)

Bug Fixes | Bug 修复

u-circle-progress: 修复微信小程序 canvas 2d 环形进度条绘制问题,适配不同平台的 canvas 上下文 (e7ab701)

Features | 新功能

u-fab: 新增悬浮按钮组件及演示示例 (85848de)
u-fab: 优化悬浮组件功能和交互，新增预设定位position、拖动吸边autoStick属性 (65a4bde)
u-text: 新增 u-text 组件默认插槽支持 (a7b6e59)

Code Refactoring | 代码重构

fab: 优化 fab 组件示例代码 (ca71fa2)
u-fab: 重构 gap 属性以支持对象类型 (bee34bf)

0.3.7（2025-10-28）下载此版本

Bug Fixes | Bug 修复

u-index-list: 修复 u-index-list 组件中 indexList 的响应式，确保数据正确对应，滚动到正确的锚点 (536479b)
u-form: 优化 u-form-item 组件样式，修复微信小程序光标样式偏移问题 (7e6694b)
u-form: 优化 model 属性的响应式更新，修复 model 对象整体替换导致的表单校验失效问题 (bc49b5b)
u-form: 修复 u-form 的重置表单方法 resetFields 失效问题 (a31f800)
u-checkbox: 修复 u-checkbox 单独使用报错的问题 (dad2832)

Features | 新功能

u-textarea: 新增 u-textarea 组件及演示示例，增强 textarea 功能，分离 u-input 的 textarea 模式 (efbb75e)
u-input: 增强 u-input 的 textarea 字数统计功能 (5e14354)
u-form: 增强表单校验功能，发射校验错误，便于自定义提示 (a553b53)

Code Refactoring | 代码重构

form: 优化表单组件的提示文本 (04b5fc7)

0.3.6（2025-10-24）下载此版本

Features | 新功能

u-select: 优化选择器组件 u-select 默认值处理逻辑，添加 preserveSelection 属性，用于控制是否保留用户上次确认的选择 (8493ff1)
u-picker: 优化 picker 的初始化和渲染流程，实现多次打开 picker 时保留用户选择的逻辑，新增 preserveSelection 属性支持 (974872e)

Code Refactoring | 代码重构

components: 使用主题色替代硬编码颜色值，统一组件的颜色风格，便于未来主题颜色的调整和维护 (ec348d4)
example: 代码示例中使用主题色替换硬编码颜色值 (3216497)
u-steps: 新增u-step (6b86eea)
u-step: 替换步骤条组件中的默认硬编码颜色值 (f3408ef)

Bug Fixes | Bug 修复

u-picker: 修复使用u-picker组件选择地区不设置默认值报错的问题 (7941135)

平台兼容性

uni-app(4.07)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
×	√	√	√	√	-	√	√	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	√	√	-	-	-	-	√	-	-	-

uView Pro

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

说明

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

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

官方文档：https://uviewpro.cn

特性

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

手机预览

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


微信小程序（微信扫码）	支付宝小程序（支付宝扫码）	H5 （浏览器扫码）	Android （浏览器扫码）

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

pnpm install
pnpm dev

链接

交流反馈

uView Pro 微信交流群：点击进入

uView Pro QQ 交流群：点击进入


微信群	*******

关于 PR

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

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

安装配置

uView Pro 支持 npm 和 uni_modules 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 easycom 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：

1. 安装 uView Pro

npm 安装：

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

2. 引入 uView Pro 主库

在 main.ts 中引入并注册 uView Pro：

import { createSSRApp } from 'vue';
// npm 方式
import uViewPro from 'uview-pro';
// uni_modules 方式
// import uViewPro from "@/uni_modules/uview-pro";

export function createApp() {
    const app = createSSRApp(App);
    app.use(uViewPro);
    return {
        app
    };
}

3. 引入全局样式

在 uni.scss 中引入主题样式：

/* npm 方式 */
@import 'uview-pro/theme.scss';
/* uni_modules 方式 */
/* @import "@/uni_modules/uview-pro/theme.scss"; */

在 App.vue 首行引入基础样式：

<style lang="scss">
  /* npm 方式 */
  @import "uview-pro/index.scss";
  /* uni_modules 方式 */
  /* @import "@/uni_modules/uview-pro/index.scss"; */
</style>

4. 配置 easycom 自动引入组件

在 pages.json 中配置 easycom 规则，实现组件自动引入：

{
    "easycom": {
        "autoscan": true,
        "custom": {
            // npm 方式
            "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
            // uni_modules 方式
            // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
        }
    },
    "pages": []
}

温馨提示

1.修改 easycom 规则后需重启 HX 或重新编译项目。
2.请确保 pages.json 中只有一个 easycom 字段，否则请自行合并多个规则。
3.一定要放在 custom 内，否则无效。

5. Volar 类型提示支持

如需在 CLI 项目中获得 Volar 的全局类型提示，请在 tsconfig.json 中添加：

{
    "compilerOptions": {
        // npm 方式
        "types": ["uview-pro/types"]
        // uni_modules 方式
        // "types": ["@/uni_modules/uview-pro/types"]
    }
}

HBuilderX 项目暂不支持 tsconfig.json 的 types 配置，CLI 项目推荐配置以获得最佳 TS 体验。

6. 组件使用

配置完成后，无需 import 和 components 注册，可直接在 SFC 中使用 uView Pro 组件：

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

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

捐赠 uView Pro

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


微信	支付宝

贡献者

版权信息

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

鸣谢

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