🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?

一、前言

uView Pro 是我近期开源的一款基于 Vue3 + TypeScript + <script setup> 全面重构的 uni-app 生态开源组件库,自正式开源以来,它凭借着丰富的组件、优质的文档和活跃的社区,主要是拥有 uView 老牌的受众用户,受到了众多开发者的关注和支持。

uView Pro 开源以来,近 10 天来,Star 量已经突破 100,感谢大家支持和关注,uView Pro 必不会让大家失望!

Star 趋势图:

uView Pro 作为开源新生力量,期待得到大家的关注和支持,因为您的每一个 Star,都是对我的鼓励,但它绝对会不负众望,欢迎访问 uView Pro 开源库:

如有问题或建议,欢迎在 Issue 区留言交流,或入群交流反馈并参与共建!

uView Pro 开源地址:

二、文档网站加入开源

近期我又开源了文档库,uView Pro 文档站点地址:uview-pro.netlify.app/

简单说一下现有的文档技术选型与搭建历程

1. 初期:VuePress 构建

uView Pro 文档最初借助了 uView 官方仓库,也是基于它改造而来,它目前还是采用 VuePress 进行搭建。VuePress 作为 Vue2 生态下的静态网站生成器,具有以下优势:

  • 支持 Markdown 语法,文档编写门槛低;
  • 内置 Vue 组件支持,便于插入交互式示例;
  • 主题和插件丰富,易于扩展和美化;
  • 构建速度快,SEO 友好。

VuePress 阶段,文档中部分示例代码仍采用 Vue2 写法,主要是作者精力不足,前期把重心放在了 uView 组件库的重构开发上,所以接下来会对文档进行持续优化,以提升用户体验。

2. 现状:内容持续优化

目前,uView Pro 文档已积累数百篇组件、工具、实战等内容,覆盖开发全流程。

目前文档结构分为:

  • 快速上手:介绍安装、引入、基本用法;
  • 组件文档:每个组件独立页面,含属性、事件、插槽、示例代码;
  • 工具函数:常用 JS 工具方法详解;
  • 实战案例:结合实际业务场景,提供完整代码和效果演示;
  • 常见问题:收录开发中遇到的典型问题及解决方案;
  • 升级指南与 changelog:帮助用户平滑升级。

3. 未来:将全面迁移 VitePress,示例代码全量 Vue3

随着 Vue3 生态的成熟,uView Pro 文档站点计划全面迁移至 VitePress:

  • 更快的构建与热更新体验:VitePress 基于 Vite,开发体验更佳;
  • 更好支持 Vue3 语法与生态 :所有示例代码将统一为 Vue3 + <script setup> 写法,降低新用户学习成本;
  • 更灵活的主题与交互:VitePress 支持自定义主题和更丰富的交互能力,提升文档可用性和美观度。

三、详尽的文档网站

1. 组件文档

  • 每个组件页面均包含属性、事件、插槽、详细说明及多种用法示例。
  • 示例代码可直接复制,便于开发者快速上手。
  • 未来将会支持在线编辑和预览。
  • 代码示例正逐步迭代为 Vue3 语法。

2. 实战案例

  • 提供了登录表单、个人中心、评论列表、订单列表、弹窗、选择器等多场景实战案例。
  • 案例代码与业务场景紧密结合,助力开发者高效解决实际问题。

3. 工具函数

  • 内置常用 JS 工具函数文档,涵盖深拷贝、节流防抖、颜色处理、加密解密、数组操作、时间格式化等。
  • 提供 uni-app 多端开发的最佳实践与注意事项。

uView Pro 内置大量工具函数,如深拷贝、节流防抖、颜色转换等。

js 复制代码
import { $u } from "uview-pro";

const obj = { a: 1, b: { c: 2 } };
const copy = $u.deepClone(obj);

const handleResize = $u.debounce(() => {
  console.log("窗口大小变化");
}, 300);
window.addEventListener("resize", handleResize);

4. 常见问题

如何在 uni-app 项目中快速集成 uView Pro?

  • 安装:目前支持最常用的两种方式,npm 和 node_modules 导入,选择哪一种都可以
  1. npm 方式:
bash 复制代码
# 使用npm/yarn/pnpm安装
npm install uview-pro
  • node_modules 方式:

下载地址:ext.dcloud.net.cn/plugin?id=2...

  1. 配置:四个步骤快速实现配置

main.ts 引入 uView 主库

js 复制代码
import { createSSRApp } from "vue";
import uViewPro from "uview-pro";

export function createApp() {
  const app = createSSRApp(App);
  app.use(uViewPro);
  // 其他配置
  return {
    app,
  };
}

uni.scss 引入全局 SCSS 主题文件

scss 复制代码
@import "uview-pro/theme.scss";

App.vue 引入基础样式

html 复制代码
<style lang="scss">
  @import "uview-pro/index.scss";
</style>

pages.json 配置 easycom 组件模式

json 复制代码
{
  "easycom": {
    // 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  }
}

安装和配置后,uView Pro 组件不生效?

  1. 请确认组件的引入路径是否正确?
  2. 请确认 pages.jsoneasycom 是否正确?注意一定要放在 custom 里,否则无效。若有其他组件库,是否与其他组件库的规则冲突?
  3. 配置后需要重启项目,不然不生效。

如何自定义主题色?

uView Pro 目前可以自定主题色,字体颜色,边框颜色等,所有组件内部的样式,都基于同一套主题,如果想要修改主题色,具体可查看 自定义主题色

配置完成后,点击下载主题文件,可以得到配置好 uview-pro-theme.scss 文件,将该文件拷贝到 uni.scss 同级目录下。然后在 uni.scss 中引入该文件,即可生效。

scss 复制代码
@import "uview-pro-theme.scss";

说明:

  • 近期会建设 FAQ 板块,将不断收录高频问题,持续更新。
  • 遇到问题,请先查看文档和 FAQ,没有找到答案,再提 issue。

如果还有其他问题,请直接联系我,或提 issue,将尽快为您解决

5. 总结优缺点

目前文档网站有以下优缺点:

优点:

  • 完全免费,无广告干扰:所有内容对开发者完全开放,无需注册、无广告弹窗,专注于技术本身。
  • 内容全面,结构清晰:涵盖组件用法、API 说明、实战案例、常见问题、升级指南等,支持多端开发场景。
  • 持续更新,紧跟主库迭代:文档内容与组件库同步更新,确保信息时效性。

缺点:

  • 文档内容:虽然很全面,但仍有部分组件功能和 API 说明缺失或不符,需要完善。
  • 代码示例:代码示例使用的是 Vue2 写法,不便于直接拷贝,在 Vue3 项目中使用。

四、uView Pro 组件库愿景

1. 目标

uView Pro 致力于成为 uni-app Vue3 生态的标杆组件库,文档网站是其重要组成部分。通过高质量的代码和文档,开发者可以:

  • 快速了解和上手 uView Pro 组件用法;
  • 参考丰富案例,提升项目开发效率;
  • 及时获取升级与兼容性信息,降低踩坑风险;

2. 核心优势

  • 基于 Vue3 + TypeScript + <script setup> 全量重构,API 设计对齐 uView 1.8.8,迁移无压力;
  • 支持 H5、微信小程序、App 等多端,兼容性强;
  • 丰富的组件与工具函数,覆盖主流业务场景;
  • 持续维护与社区活跃,快速响应开发者需求。

3. 近期规划

  1. 文档全面迁移 VitePress,提升开发体验与交互能力;
  2. 示例代码全量 Vue3,降低新用户学习门槛;
  3. 支持在线编辑与预览,提升文档互动性;
  4. 持续丰富实战案例与 FAQ,覆盖更多业务场景;
  5. 完善多语言支持,服务更广泛开发者群体;

五、总结:欢迎 Star 与共建

uView Pro 不只是一个组件库,更是前端工程化、自动化、最佳实践的集大成者。而 uView Pro 文档网站坚持免费、无广告、内容开放的理念,致力于为开发者提供最优质的学习与开发体验。未来,我将持续优化文档内容与交互,推动组件库与文档共同成长。

如果 uView Pro 对你有帮助,欢迎 Star、分享、参与共建,让更多人受益!相信 uView Pro 会越来越好用,项目的成长离不开你的支持。

也请大家多些包容和耐心,所有合理的问题都会及时响应和解决,共同营造积极向上的社区氛围。

uView Pro 开源地址:

欢迎各路大佬来使用 uView Pro,希望对大家开发 uni-app 项目有帮助!

相关推荐
RaidenLiu9 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost10 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost12 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost18 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪20 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在27 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方29 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
jason_yang33 分钟前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
小猫由里香34 分钟前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich37 分钟前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端