一、前言
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导入，选择哪一种都可以
- npm 方式：
bash
# 使用npm/yarn/pnpm安装
npm install uview-pro- node_modules 方式：
下载地址：ext.dcloud.net.cn/plugin?id=2...
- 配置：四个步骤快速实现配置
在 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 组件不生效？
- 请确认组件的引入路径是否正确？
- 请确认
pages.json下easycom是否正确？注意一定要放在 custom 里，否则无效。若有其他组件库，是否与其他组件库的规则冲突？ - 配置后需要重启项目，不然不生效。
如何自定义主题色？
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. 近期规划
- 文档全面迁移 VitePress，提升开发体验与交互能力；
- 示例代码全量 Vue3，降低新用户学习门槛；
- 支持在线编辑与预览，提升文档互动性；
- 持续丰富实战案例与 FAQ，覆盖更多业务场景；
- 完善多语言支持，服务更广泛开发者群体；
五、总结：欢迎 Star 与共建
uView Pro 不只是一个组件库，更是前端工程化、自动化、最佳实践的集大成者。而 uView Pro 文档网站坚持免费、无广告、内容开放的理念，致力于为开发者提供最优质的学习与开发体验。未来，我将持续优化文档内容与交互，推动组件库与文档共同成长。
如果 uView Pro 对你有帮助，欢迎 Star、分享、参与共建，让更多人受益！相信 uView Pro 会越来越好用，项目的成长离不开你的支持。
也请大家多些包容和耐心，所有合理的问题都会及时响应和解决，共同营造积极向上的社区氛围。
uView Pro 开源地址：
欢迎各路大佬来使用 uView Pro，希望对大家开发 uni-app 项目有帮助！