uView Pro 正式开源！70+ Vue3 组件重构全记录，助力 uni-app 组件生态，你会选择吗？

一、项目背景

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 已完成 67 个核心组件的重构，那段时间通常都是晚上凌晨还在写代码，好在坚持下来，现已在 GitHub、Gitee 开源，并同步发布至 npm，欢迎大家来体验、反馈与贡献，多多 Star、Fork、PR、Issue（嘿嘿）

不好意思，啰哩啰嗦太多了，直接看项目地址吧！

项目地址：

GitHub：github.com/anyup/uview...

Gitee：gitee.com/anyup/uview...

npm：www.npmjs.com/package/uvi...

插件市场：p.dcloud.net.cn/plugin?id=2...

二、为什么选择 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，但观其源码，大都还是使用的 Vue2 的 Option API 风格，而我要的是 Composition API 的

三、已完成组件重构

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

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 +
全量组件重构：所有组件均基于最新技术栈重写，非简单兼容，真正适配 Vue3。
API 设计对齐 uView 1.8.8：最大程度降低迁移成本，老用户可无缝切换。

以一个最简单的组件（u-line）为例，组件源码做了详尽的注释，便于大家阅读：

2. 多端兼容

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

3. 性能优化

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

4. 开发体验

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

五、快速使用

安装

npm 安装

bash 复制代码

# npm 安装
npm install uview-pro

# yarn 安装
yarn add uview-pro

# pnpm 安装
pnpm add uview-pro

插件市场下载

p.dcloud.net.cn/plugin?name...

快速上手

main.ts引入 uView 库

js 复制代码

// 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 属性支持)

css 复制代码

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

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

css 复制代码

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

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

js 复制代码

// 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组件，直接引用即可。

html 复制代码

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

六、项目不足

虽然 uView Pro 已完成 70+各核心组件的重构，并在主流平台自测通过，但仍存在一些不足和挑战：

平台兼容性待完善：目前主要兼容 h5、微信小程序、Android，其他平台如 iOS、支付宝小程序、百度小程序等尚未全面测试。
部分高级功能待补充：如复杂表单校验、国际化支持、暗黑模式等功能还在规划中。
生态初期：VSCode 代码提示插件、第三方扩展、模板市场等尚未上线。
文档细节：部分组件的边界场景、最佳实践还需补充。
自动化测试不足：目前以自测为主，后续需引入自动化测试体系。

难以避免会存在问题，uView Pro 目前还是一个初期阶段，一些问题我会尽量快速解决，大家也可以提 PR 来共同维护

七、未来规划

那句话怎么说来着，不想成为将军的士兵不是好将军。uView Pro 的目标是成为 uni-app Vue3 生态的标杆组件库，未来规划如下：

平台适配：全面兼容 iOS、支付宝小程序、百度小程序、快应用等主流平台。
功能完善：补充高级表单、国际化、暗黑模式、动画库等功能。
开发工具：开发 VSCode 代码提示插件、CLI 工具、低代码平台（长远）等。
自动化测试：引入单元测试、保证每一个组件的稳定性。
文档优化：完善组件文档、案例、最佳实践。
社区运营：持续维护交流群群、GitHub/Gitee Issues。
商业合作与赞助：开源辛苦且漫长，欢迎企业、团队成为赞助商。

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

八、参与贡献

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

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

项目地址：

GitHub：github.com/anyup/uview...

Gitee：gitee.com/anyup/uview...

npm：www.npmjs.com/package/uvi...

插件市场：p.dcloud.net.cn/plugin?id=2...

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