uView_Pro

发布：2025-11-17 11:14
更新：2025-11-17 11:14
阅读：36

【支持鸿蒙】uView Pro 开源组件库！80+ Vue3 组件，uni-app 组件库新晋之星

分类：鸿蒙Next

鸿蒙征文

uView Pro 开源地址：

GitHub：https://github.com/anyup/uview-pro

Gitee：https://gitee.com/anyup/uview-pro

npm：https://www.npmjs.com/package/uview-pro

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

插件市场：https://ext.dcloud.net.cn/plugin?id=24633

一、项目背景

uni-app 作为一款优秀的跨平台框架，凭借其“一套代码，多端运行”的理念，受到了广大移动端开发者的青睐。

而在 uni-app 的生态中，uView UI 作为一款基于 Vue2 开发的开源组件库，凭借其丰富的组件、完善的文档和良好的社区氛围，成为了许多开发者的首选，这当中就包括我，我在 2019 年接触 uni-app，刚开始只有官方的 uni-ui，没有别的选择，后来 uView UI 发布，以其简洁的 API 设计和良好的文档，成为我后来使用 uni-app 的首选，一直到现在。

然而，随着 Vue3 的正式发布以及 TypeScript 的广泛应用，越来越多的项目开始向 Vue3 技术栈迁移，大家对于兼容 Vue3 的组件库需求日益增长。然而直至现在，uView 官方也没出 Vue3 版本，这可能是精力不足的缘故。

作为一名前端开发者，相信大家都能深刻体会到 Vue3 带来的性能提升和开发体验优化，uView UI 没有进行 Vue3 迭代，无法满足新项目基于 Vue3 的开发需求。

为此，我决定用最新的技术栈 —— Vue3 + TypeScript + <script setup>，对 uView UI 进行全面重构，打造一款真正适配 uni-app Vue3 开发者的高质量组件库，并将其命名为“uView Pro”。

目前，uView Pro 已经支持：安卓、苹果、鸿蒙等App平台，h5平台，微信、支付宝、头条、QQ、钉钉等小程序平台，未来也会持续兼容其他平台，详情可查看官网：https://uviewpro.cn/

二、为什么选择 uView 1.x

我为什么选择 uView 1.x 来进行重构？而不是选择 uView 2.0？

对比 1.x， uView2.0 与 uView1.x 最大的不同就是对 nvue 的支持，因为 2.x 立项的首要目标就是对 nvue 的兼容，目前 uView2.0 也全面实现了兼容 nvue。

然而，我在之前的项目中对 nvue 的开发需求并不高，所以这一点对我没什么吸引力。其次，uview 2.0 对一些组件有一些优化，比如：form 表单校验的加强，优化 popup 弹窗组件等等，如下：

uView 2.0 对比 1.X 有哪些更改？

其实还好，1.0 版本已经比较稳定了，2.0 我都没用过，所以我也没有必要重构一个不熟悉的框架。

因此，我最终选择基于 uView UI 1.8.8 的版本进行的 Vue3 重构，1.8.8 是 uView UI 1.x 的一个最新的稳定版本，我在众多的项目中都用过，兼容性好，主要是我很熟悉源码。

uView UI 虽然不兼容 Vue3，但也能保持周活 2.6K+

市面上也有一些开发者将 uView UI 做了适配，使其兼容到 Vue3，但观其源码，大都还是使用的 Vue2 的 Option API 风格，而我要的是 Composition API 的 <script setup> 语法糖。

三、已完成组件重构

uView Pro 致力于覆盖 uni-app 项目开发中的各类场景，组件设计参考了 uView UI 1.8.8 的 API，确保开发者可以无缝切换。以下为已完成的 80+ 组件分类及简介：

1. 基础组件

Color 色彩：统一色彩体系，支持主题切换。
Icon 图标：丰富的图标库，支持自定义。
Image 图片：图片懒加载、错误占位等功能。
Button 按钮：多样化按钮样式，支持加载、禁用等状态。
Layout 布局：灵活的栅格系统，适配多端。
Cell 单元格：列表项展示，支持左滑操作。
Badge 徽标数：数字、点状等多种徽标样式。
Tag 标签：多样化标签样式，支持自定义颜色。

2. 表单组件

Form 表单：表单校验、分组、布局。
Calendar 日历：日期选择、范围选择。
Select 列选择器：多级联动选择。
Keyboard 键盘：自定义数字键盘。
Picker 选择器：多类型选择器。
Rate 评分：星级评分。
Search 搜索：搜索框，支持联想。
NumberBox 步进器：数字加减。
Upload 上传：图片、文件上传。
VerificationCode 验证码倒计时：短信验证码场景。
Field 输入框：多类型输入框。
Checkbox 复选框：多选项。
Radio 单选框：单选项。
Switch 开关选择器：状态切换。
Slider 滑动选择器：滑块选择。

3. 数据组件

Progress 进度条：线性、圆形进度。
Table 表格：多功能表格。
CountDown 倒计时：活动倒计时。
CountTo 数字滚动：数字动画。

4. 反馈组件

ActionSheet 操作菜单：底部弹出菜单。
AlertTips 警告提示：警告、提示信息。
Toast 消息提示：轻量弹窗。
NoticeBar 滚动通知：顶部公告。
TopTips 顶部提示：页面顶部提示。
SwipeAction 滑动单元格：列表项滑动操作。
Collapse 折叠面板：内容收起展开。
Popup 弹出层：多种弹窗样式。
Modal 模态框：确认、取消弹窗。
FullScreen 压窗屏：全屏弹窗。

5. 布局组件

Line 线条：分割线、装饰线。
Card 卡片：内容卡片。
Mask 遮罩层：遮罩效果。
NoNetwork 无网络提示：断网提示。
Grid 宫格布局：九宫格、自由布局。
Swiper 轮播图：图片轮播。
TimeLine 时间轴：事件流程展示。
Skeleton 骨架屏：页面加载占位。
Sticky 吸顶：元素吸顶。
Waterfall 瀑布流：图片流式布局。
Divider 分割线：内容分隔。

6. 导航组件

Dropdown 下拉菜单：多级菜单。
Tabbar 底部导航栏：多端适配。
BackTop 返回顶部：一键回顶。
Navbar 导航栏：页面头部导航。
Tabs 标签：选项卡切换。
TabsSwiper 全屏选项卡：滑动切换。
Subsection 分段器：内容分段。
IndexList 索引列表：字母索引。
Steps 步骤条：流程步骤。
Empty 内容为空：空状态展示。
Section 查看更多：内容展开。

7. 其他组件

MessageInput 验证码输入：短信验证码输入框。
Loadmore 加载更多：列表加载。
ReadMore 展开阅读更多：内容展开。
LazyLoad 懒加载：图片、内容懒加载。
Gap 间隔槽：布局间隔。
Avatar 头像：用户头像。
Link 超链接：文本链接。
Loading 加载动画：多种加载效果。

所有组件均已通过 h5、微信小程序、Android 平台的自测，最大限度的保证了良好的兼容性和稳定性。

四、技术优势与要点

1. 最新技术栈

Vue3 + TypeScript + <script setup>：充分利用 Vue3 的响应式、组合式 API，TypeScript 强类型保障，<script setup> 简化代码结构。
全量组件重构：所有组件均基于最新技术栈重写，非简单兼容，真正适配 Vue3。
API 设计对齐 uView 1.8.8：最大程度降低迁移成本，老用户可无缝切换。

2. 多端兼容

支持 h5、微信小程序、Android：核心组件已在主流平台自测通过，兼容性强。
未来规划更多平台：后续将适配 iOS、支付宝小程序、百度小程序等。

3. 性能优化

按需加载：支持 tree-shaking，减少包体积。
响应式渲染：充分利用 Vue3 的响应式系统，提升渲染性能。
自定义主题：支持主题切换，满足多样化需求。

4. 开发体验

文档体系：同步重构文档，涵盖组件用法、API、案例。
VSCode 代码提示：计划开发 VSCode 插件，提升开发效率。
社区支持：我创建了相关交流群、GitHub/Gitee Issues，及时响应反馈。

五、快速使用

安装

npm 安装

# npm 安装  
npm install uview-pro  

# yarn 安装  
yarn add uview-pro  

# pnpm 安装  
pnpm add uview-pro

插件市场下载

https://ext.dcloud.net.cn/plugin?id=24633

快速上手

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

App.vue引入基础样式(注意 style 标签需声明 scss 属性支持)

/* App.vue */  
<style lang="scss">  
@import "uview-pro/index.scss";  
</style>

uni.scss引入全局 scss 变量文件

/* uni.scss */  
@import 'uview-pro/theme.scss';

pages.json配置 easycom 规则(按需引入)

// pages.json  
{  
  "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": [  
    // ...  
  ]  
}

使用方法

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

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

六、未来计划

uView Pro 的目标是成为 uni-app Vue3 生态的标杆组件库，根据规划，未来几个方向包括：

持续优化现有组件，新增组件，提升用户体验
国际化（i18n）支持：统一组件的语言切换能力，方便多语言产品线接入。
暗黑模式（Dark Mode）：与运行时主题切换能力结合，提供暗色皮肤一键切换体验。
优化现有平台兼容性，扩展更多平台的适配测试（保持对小程序宿主的兼容修复）。
uni-app x 支持：目前还在调研中。
mcp 支持。

相信这一切都不会太远，期待 ing

七、结语

uView Pro 和 uView 一样，作为一款完全开源、免费商用的组件库，离不开社区的支持与贡献。无论你是前端开发者、设计师、产品经理，还是企业用户，都欢迎加入 uView Pro 的研发，参与组件开发、文档完善、生态建设等工作。所有贡献者都将在官网、文档中鸣谢。

未来，uView Pro 将持续迭代，拥抱新技术，服务更多开发者。让我们一起为 uni-app Vue3 生态贡献力量，打造更优秀的 UI 组件库！

uView Pro 开源地址：

GitHub：https://github.com/anyup/uview-pro

Gitee：https://gitee.com/anyup/uview-pro

npm：https://www.npmjs.com/package/uview-pro

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

插件市场：https://ext.dcloud.net.cn/plugin?id=24633

欢迎 Star、Fork、PR、Issue，欢迎来撩！

如有问题或建议，欢迎在 Issue 区留言交流，或入群交流反馈！

0 赞关注分享

0 个评论

要回复文章请先登录或注册