一、项目背景

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：https://github.com/anyup/uview-pro

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

  • npm：uview-pro - npm

  • 插件市场：uView Pro是uni-app全面兼容Vue3+TS的uni-app生态框架 - DCloud

  • 文档地址：uView Pro - 多平台快速开发的UI框架 - uni-app UI框架

  • 交流反馈：交流反馈 | uView Pro - 多平台快速开发的UI框架 - uni-app UI框架

二、为什么选择 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，确保开发者可以无缝切换。以下为已完成的 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 + <script setup>：充分利用 Vue3 的响应式、组合式 API，TypeScript 强类型保障，<script setup> 简化代码结构。

  • 全量组件重构：所有组件均基于最新技术栈重写，非简单兼容，真正适配 Vue3。

  • API 设计对齐 uView 1.8.8：最大程度降低迁移成本，老用户可无缝切换。

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

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
插件市场下载

uView Pro是uni-app全面兼容Vue3+TS的uni-app生态框架 - DCloud

快速上手

  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 已完成 70+各核心组件的重构，并在主流平台自测通过，但仍存在一些不足和挑战：

  1. 平台兼容性待完善：目前主要兼容 h5、微信小程序、Android，其他平台如 iOS、支付宝小程序、百度小程序等尚未全面测试。

  2. 部分高级功能待补充：如复杂表单校验、国际化支持、暗黑模式等功能还在规划中。

  3. 生态初期：VSCode 代码提示插件、第三方扩展、模板市场等尚未上线。

  4. 文档细节：部分组件的边界场景、最佳实践还需补充。

  5. 自动化测试不足：目前以自测为主，后续需引入自动化测试体系。

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

七、未来规划

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

  1. 平台适配：全面兼容 iOS、支付宝小程序、百度小程序、快应用等主流平台。

  2. 功能完善：补充高级表单、国际化、暗黑模式、动画库等功能。

  3. 开发工具：开发 VSCode 代码提示插件、CLI 工具、低代码平台（长远）等。

  4. 自动化测试：引入单元测试、保证每一个组件的稳定性。

  5. 文档优化：完善组件文档、案例、最佳实践。

  6. 社区运营：持续维护交流群群、GitHub/Gitee Issues。

  7. 商业合作与赞助：开源辛苦且漫长，欢迎企业、团队成为赞助商。

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

八、参与贡献

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

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

项目地址：

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

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

  • npm：uview-pro - npm

  • 插件市场：uView Pro是uni-app全面兼容Vue3+TS的uni-app生态框架 - DCloud

  • 文档地址：uView Pro - 多平台快速开发的UI框架 - uni-app UI框架

  • 交流反馈：交流反馈 | uView Pro - 多平台快速开发的UI框架 - uni-app UI框架

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/92802.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/92802.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/92802.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qwen3 技术报告 的 Strong-to-Weak Distillation 强到弱蒸馏 和 代码实现

Qwen3 技术报告 的 Strong-to-Weak Distillation 强到弱蒸馏 和 代码实现

Qwen3 技术报告 的 Strong-to-Weak Distillation 强到弱蒸馏 和 代码实现 flyfish 代码在文末 技术报告就是不一定经过严格的学术期刊同行评审&#xff0c;但具有较强的专业性和实用性。 The post-training pipeline of Qwen3 is strategically designed with two core ob…
阅读更多...
一体化步进伺服电机在无人机舱门应用中的应用案例

一体化步进伺服电机在无人机舱门应用中的应用案例

在无人机的设计过程中&#xff0c;舱门的快速、稳定开合对于无人机的任务执行效率和安全性至关重要。传统的舱门驱动方式存在响应速度慢、控制精度不足等问题&#xff0c;难以满足无人机复杂任务的需求。因此&#xff0c;某客户无人机选择了‌一体化步进伺服电机‌作为舱门的驱…
阅读更多...
Ansible 面试题 20250811

Ansible 面试题 20250811

1. 你使用过哪些 Ansible 模块？ Ansible 常用的模块: file 、copy 、template 、yum 、apt 、service 、user 、group 、shell 、script 、command 、cron 等等。 这些模块可以用来管理文件、软件包、服务、用户、组、计划任务等等。 Docker相关模块: docker_container：用…
阅读更多...
安路Anlogic FPGA下载器的驱动安装与测试教程

安路Anlogic FPGA下载器的驱动安装与测试教程

参考链接&#xff1a;安路下载器JTAG驱动安装 - 米联客(milianke) - 博客园 安路支持几款下载器&#xff1a; AL-LINK在线下载器是基于上海安路信息科技股份科技有限公司全系列 CPLD/FPGA 器件&#xff0c;结合公司自研的 TD 软件&#xff0c;可实现在线 JTAG 程序下载、Chip…
阅读更多...
基于深度学习的股票分析和预测系统

基于深度学习的股票分析和预测系统

摘要 【关键词】 第一章 绪论 1.1 研究背景及意义 1.2 国内外文献综述 1.2.1 国外研究结果 1.2.2 国内研究结果 1.3 本课题主要工作 第二章 相关工作介绍 2.1文本量化方法 2.2 CNN、LSTM模型 2.3评测准确率及收益率 第三章 开发技术介绍 3.1 系统开发平台 3.2平台…
阅读更多...
ML基础设施（Machine Learning Infrastructure）

ML基础设施（Machine Learning Infrastructure）

ML基础设施&#xff08;Machine Learning Infrastructure&#xff09; 是指支持机器学习项目从开发到部署全生命周期所需的底层技术架构和工具集合。其核心目标是让数据科学家和工程师能专注于模型创新&#xff0c;而非环境搭建等重复性工作。以下是深度解析&#xff1a;一、ML…
阅读更多...
代码随想录刷题Day29

代码随想录刷题Day29

逆波兰表达式求值这是一道经典地使用栈来解决后缀表达式求解的题目。使用栈来求解后缀表达式的流程如下&#xff1a;借助栈的结构&#xff0c;可以求解出原始表达式是&#xff1a;9 &#xff08;-3 - 1&#xff09;* 3 10 / 2 2&#xff0c;在遵照规则过程中&#xff0c;还有…
阅读更多...
crew AI笔记[3] - 设计理念

crew AI笔记[3] - 设计理念

二八法则-task设计最重要80%精力设计tasks&#xff0c;20%精力定义agents花最多的实践定义任务说明清晰定义输入输出增加示例和预期结果来约束输出剩下的精力完善agent的role、goal、backstory1、Agent设计三要素role-goal-backstory框架Role - 职能定义足够具体【作家 &#x…
阅读更多...
【李宏毅-2024】第六讲 大语言模型的训练过程1——预训练（Pre-training）

【李宏毅-2024】第六讲 大语言模型的训练过程1——预训练（Pre-training）

目录概述1. 预训练&#xff08;Pre-training&#xff09;2. 微调&#xff08;Fine-tuning&#xff0c;又称 SFT&#xff0c;Supervised Fine-Tuning&#xff09;3. 对齐&#xff08;Alignment&#xff0c;又称 RLHF 或 DPO 等&#xff09;4 三阶段对比6 第一阶段——自我学习&a…
阅读更多...
基于LLVM的memcpy静态分析工具：设计思路与原理解析(C/C++代码实现)

基于LLVM的memcpy静态分析工具：设计思路与原理解析(C/C++代码实现)

在程序开发中&#xff0c;内存复制操作&#xff08;如memcpy&#xff09;往往是性能瓶颈的关键来源——尤其是大型内存块的复制&#xff0c;可能导致缓存失效、带宽占用过高等问题。为了精准定位这些潜在的性能热点&#xff0c;开发者需要一种能自动识别程序中memcpy调用&#…
阅读更多...
使用 Conda 安装 xinference[all]（详细版）

使用 Conda 安装 xinference[all]（详细版）

1. 安装 Miniconda&#xff08;若未安装&#xff09; Miniconda 是 Anaconda 的轻量版&#xff0c;仅包含 Conda 和 Python&#xff0c;适合服务器环境。 下载并安装 Miniconda 下载地址&#xff1a;Index of /miniconda &#xff0c;可以自行选择适合的版本 # 下载最新版 …
阅读更多...
服务器登上去，显示 failed to send WATCHDOG 重启有效吗？

服务器登上去，显示 failed to send WATCHDOG 重启有效吗？

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 当你登录服务器时&#xff0c;看到类似以下提示&#xff1a; failed to send WATCHDOG: Resource temporarily unavailable这通常和系统的 systemd 服务有关&#xff0c;尤其是那些启用了 watchdog&#xff08;看门…
阅读更多...
重学React（五）：脱围机制一

重学React（五）：脱围机制一

背景&#xff1a; 之前将React的基础知识以及状态管理相关的知识都过了一遍&#xff0c;查漏补缺的同时对React也有了一些新鲜的认知&#xff0c;接下来这个模块的名字很有意思&#xff1a;脱围机制&#xff0c;内容也比之前的部分难理解一些。但整体看下来&#xff0c;理解之后…
阅读更多...
去除Edge微软浏览器与Chrome谷歌浏览器顶部出现“此版本的Windows不再支持升级Windows 10”的烦人提示

去除Edge微软浏览器与Chrome谷歌浏览器顶部出现“此版本的Windows不再支持升级Windows 10”的烦人提示

前言 在 Windows 7 中&#xff0c;安装 Microsoft Edge 109 版本后&#xff0c;启动浏览器时会弹出提示&#xff1a; 此版本的 Windows 不再支持 Microsoft Edge。升级到 Windows 10 或更高版本&#xff0c;以获取常规功能和安全更新。 同样地&#xff0c;安装 Google Chrome 1…
阅读更多...
PWM、脉冲

PWM、脉冲

要求&#xff1a;一、PWM输出PWM波生成原理在此处使用TIM2生成PWM&#xff0c;PA1输出PWM波。CNT小于CCR时&#xff0c;输出高电平&#xff1b;CNT大于CCR时&#xff0c;输出低电平。 输入捕获测量频率的原理输入捕获的捕获意思是它在PWM波上升沿或者下降沿的时候&#xff0c;会…
阅读更多...
文件IO(1)

文件IO(1)

.文件IO1.概念标准IO是有缓存的IO&#xff0c;文件IO没有缓存&#xff0c;适合于通信、硬件设备操作标准IO是库函数&#xff0c;文件IO是系统调用2.系统调用与库函数系统调用&#xff1a;是Linux内核中的代码&#xff0c;只能在Linux系统中使用库函数&#xff1a;是对系统调用的…
阅读更多...
【AI】Pycharm中要注意Python程序文件的位置

【AI】Pycharm中要注意Python程序文件的位置

博主试着在本地电脑用Pycharm环境运行随便一个机器学习然后做图像识别的模型&#xff0c;Python的程序一直报博主学习图片的路径不正确&#xff0c;博主查了好几遍&#xff0c;也没找出问题&#xff0c;后来借助Deepseek才知道&#xff0c;Python主程序的位置一定要在Project下…
阅读更多...
TDengine 可观测性最佳实践

TDengine 可观测性最佳实践

TDengine 介绍 TDengine 是一款开源、高性能、云原生的时序数据库&#xff0c;专为物联网、车联网、工业互联网、金融、IT 运维等场景优化设计。它不仅提供了高效的数据存储和查询功能&#xff0c;还带有内建的缓存、流式计算、数据订阅等系统功能&#xff0c;能大幅减少系统设…
阅读更多...
Jenkins 搭建鸿蒙打包

Jenkins 搭建鸿蒙打包

1、创建流水线工程 选择 Freestyle project 2、配置模板仓库、凭证 配置仓库地址 创建凭证&#xff0c;凭证选择账号-密码&#xff08;能够访问该仓库的个人或管理员 Gitlab 账密&#xff09; 到这里执行构建&#xff0c;便可以克隆仓库到工作目录 3、安装插件 3.1 Rebuild…
阅读更多...
【SpringBoot】02 基础入门-什么是Spring Boot?：Spring与SpringBoot

【SpringBoot】02 基础入门-什么是Spring Boot?：Spring与SpringBoot

文章目录1、Spring能做什么1.1、Spring的能力1.2、Spring的生态1.3、Spring5重大升级1.3.1、响应式编程1.3.2、内部源码设计2、为什么用SpringBoot2.1、SpringBoot优点2.2、SpringBoot缺点3、时代背景3.2、分布式分布式的困难分布式的解决3.3、云原生上云的困难4、如何学习Spri…
阅读更多...
最新文章

Copyright @ 2022~2023