## 前言从零开始搭建一个鸿蒙开发项目需要多久？配置路由、状态管理、HTTP 拦截、国际化... 这些准备工作可能就要花掉你一整天。而现在，**uView Pro Starter** 这个开源项目可以让你 5 分钟内进入业务开发，真正的「开箱即用」。并且通过 **uView Pro Starter**，你可以在 5 分钟内搭建一个鸿蒙应用架构，完全可以做到 **低代码**，**低配置**，**低学习成本**。我已经使用 **uView Pro Starter**，上架了一款鸿蒙应用： ![项目预览图](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/db9ec1ef170741cb93ba6b0b566ec2b8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=hw3gzM50Hz1%2B0ijTJeBNX82u090%3D) 点击查看：[**uViewPro(跨平台UI组件库)**](https://uviewpro.cn/zh/resource/harmony.html)，可以沉浸式体验应用内部功能。接下来让我们了解一下 **uView Pro Starter** 快速启动项目的具体使用。 ## 🎯 一、为什么你需要这个快速启动项目？ ### 1.1 鸿蒙开发的「起步困境」作为一名 uni-app 开发者，当你准备开发鸿蒙应用时，是否遇到过以下困扰： * **环境配置复杂**：Node.js 版本、pnpm、HBuilderX... 光是环境配置就要折腾半天 * **项目结构混乱**：不知道如何组织代码，路由、状态管理、API 层一团糟 * **功能重复造轮子**：HTTP 拦截器、主题切换、多语言... 每个项目都要写一遍 * **文档不完善**：遇到问题不知道去哪找答案，踩坑全靠猜想象一下这样的场景： * 🎨 老板要求三天内出一个鸿蒙应用 Demo * 🌙 产品经理要求支持暗黑模式和多语言 * 🔧 你的代码还停留在「如何创建项目」的阶段这些问题，**uView Pro Starter** 都能帮你解决！ ### 1.2 什么是 uView Pro Starter？ **uView Pro Starter** 是一个基于 **uView Pro + Vite + UnoCSS** 搭建的 uni-app 快速启动项目，专为鸿蒙+多平台开发量身定制。 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/018e8f9517dd4284a4f9415f637e3fc8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=8afoII1CPtwBOVOej9WhtHAc%2B04%3D) > **核心定位**：让开发者专注于业务逻辑，而不是重复的配置工作这个项目不仅仅是一个空架子，它是一个**生产级**的启动模板，包含了你开发鸿蒙应用所需的一切。 ## 🛠️ 二、项目核心特性 ### 2.1 跨平台开发 - 一套代码，多端运行使用 **uView Pro Starter** 开发的应用，支持同时编译到： | 平台 | 支持情况 | 说明 | | ----------------- | ------ | ------- | | HarmonyOS | ✅ 完美支持 | 华为鸿蒙系统 | | H5 | ✅ 完美支持 | 浏览器直接访问 | | 微信小程序 | ✅ 完美支持 | 微信扫码体验 | | 支付宝小程序 | ✅ 完美支持 | 支付宝扫码体验 | | App (Android/iOS) | ✅ 完美支持 | 原生应用体验 | ```bash # 运行命令 pnpm run dev:h5 # H5 开发 pnpm run dev:mp-weixin # 微信小程序 pnpm run dev:app # App 开发 pnpm run build:app # App 构建 ``` **真正实现「一次开发，多端部署」**，让你的代码复用率可达 **90%+**。 ### 2.2 多主题系统 - 一键换肤项目内置了完整的多主题支持，包含： * **亮色/深色双主题**：跟随系统或手动切换 * **4 套预设主题**：默认蓝、霞光紫、清翠绿、暖阳橙 * **自定义主题**：支持智能推断主题色，3 分钟生成多种主题 * **即时生效**：切换主题无需刷新页面 ```typescript // 主题切换示例 import { useTheme } from 'uview-pro' const { darkMode, setTheme, toggleDarkMode } = useTheme() // 切换主题 setTheme('green') // 切换暗黑模式 toggleDarkMode() ``` ![主题切换](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a054b232da4f4bb7985a287b175063e4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=8B6bb5rPF%2F6ug8r1tLMgNWI3Rao%3D) ### 2.3 国际化 i18n - 全球化支持基于 **vue-i18n** 实现的多语言支持： * **中英文切换**：内置中文、英文语言包 * **动态切换**：运行时即时切换，无需重启 * **组件级支持**：所有 uView Pro 组件自动适配 * **持久化**：用户选择自动保存 ```typescript // 语言切换 import { useLang } from '@/hooks/useLang' const { switchLang, currentLang } = useLang() // 切换到英文 switchLang('en-US') ``` ### 2.4 状态管理 - Pinia + 持久化集成 **Pinia** 状态管理库，配合持久化插件： ```typescript // stores/user.ts import { defineStore } from 'pinia' import { ref } from 'vue' export const useUserStore = defineStore('user', () => { const userInfo = ref({}) const isLogin = ref(false) async function login(credentials: any) { // 登录逻辑 } function logout() { // 登出逻辑 } return { userInfo, isLogin, login, logout } }, { persist: true // 启用持久化 }) ``` **特性亮点**： * 🎯 Setup Store 风格，代码更简洁 * 💾 自动持久化，刷新不丢失 * 🔄 完整的 TypeScript 支持 * 📦 模块化组织，易于维护 ### 2.5 HTTP 请求 - 开箱即用集成 uView Pro HTTP 模块，提供完整的请求方案： ```typescript import { http } from 'uview-pro' // GET 请求 const res = await http.get('/api/users') // POST 请求 const res = await http.post('/api/users', { name: '张三', email: 'zhangsan@example.com' }) ``` **内置功能**： * ✅ 请求/响应拦截器 * ✅ Loading 提示自动显示 * ✅ Toast 错误提示 * ✅ 401 自动跳转登录 * ✅ Token 自动携带 ### 2.6 TypeScript 支持 - 类型安全项目采用 **TypeScript** 开发，享受： * 💪 完整的类型定义 * 🔍 编译时类型检查 * 🎯 智能代码提示 * 🔄 安全重构 ```typescript // 类型示例 interface UserInfo { id: string name: string avatar: string email: string } const userInfo = ref({ id: '', name: '', avatar: '', email: '' }) ``` ## 🏗️ 三、项目结构 ### 3.1 清晰目录组织 uview-pro-starter/ ├── pages/ # 页面目录（主要开发目录） │ ├── home/ # 首页模块 │ └── about/ # 关于模块 ├── components/ # 组件目录 ├── stores/ # Pinia 状态管理 │ ├── counter.ts # 计数器 store │ └── user.ts # 用户 store ├── locale/ # 国际化配置 │ └── lang/ │ ├── en-US.json # 英文语言包 │ └── zh-CN.json # 简体中文语言包 ├── common/ # 公共配置和工具 │ ├── http.interceptor.ts # HTTP 拦截器 │ ├── uview-pro.theme.ts # 主题配置 │ └── constant.ts # 常量定义 ├── hooks/ # 组合式函数 ├── pages.json # 路由配置 ├── manifest.json # 应用配置 ├── theme.json # 应用主题色配置 ├── App.vue # 根组件 ├── main.ts # 入口文件 └── uni.scss # 全局样式 ### 3.2 技术栈版本 | 技术 | 版本 | 说明 | | ---------- | ------- | ---------- | | uni-app | 4.87 | 跨平台开发框架 | | Vue | 3.4.21 | 前端框架 | | TypeScript | \^5.9.3 | 类型检查语言 | | uView Pro | latest | UI 组件库 | | Pinia | 2.2.4 | 状态管理库 | | vue-i18n | 9.1.9 | 国际化解决方案 | | UnoCSS | 66.0.0 | 原子化 CSS 引擎 | | Vite | 5.2.8 | 构建工具 | ## 🚀 四、快速开始 ### 4.1 环境要求 | 工具 | 版本 | 说明 | | --------- | ---- | ---------------- | | Node.js | 16+ | JavaScript 运行时 | | pnpm | 9+ | 包管理工具（推荐） | | HBuilderX | 3.8+ | uni-app 开发工具（可选） | ### 4.2 获取项目 **方式一：直接克隆（推荐）** 通过 Git 命令克隆项目 ```bash git clone https://github.com/anyup/uView-Pro-Starter.git cd uView-Pro-Starter ``` **方式二：使用 create-uni 脚手架** 通过 create-uni 脚手架创建项目 ```bash pnpm create uni <项目名称> -t uview-pro-starter ``` **方式三：下载 ZIP** 通过 ZIP 下载项目从 [GitHub Releases](https://github.com/anyup/uView-Pro-Starter/releases) 下载最新版本 ### 4.3 安装依赖 ```bash # 使用 pnpm（推荐） pnpm install ``` ### 4.4 开发调试 ```bash # 运行到 H5 pnpm run dev:h5 # 运行到微信小程序 pnpm run dev:mp-weixin # 运行到 App pnpm run dev:app ``` ### 4.5 生产构建 ```bash # 构建 H5 pnpm run build:h5 # 构建微信小程序 pnpm run build:mp-weixin # 构建 App pnpm run build:app ``` ## 💡 五、功能模块详解 ### 5.1 自定义 Tabbar 项目提供了自定义 Tabbar 组件，支持： * 🏷️ 徽章显示 * 🔴 红点提示 * 💾 状态持久化 * 🎨 主题适配 ```vue ``` ### 5.2 页面布局采用 **AppPage** 组件统一管理页面布局： ```vue ``` **特性**： * 📦 自动处理安全区域 * 🎨 主题色适配 * 🔄 状态栏适配 ### 5.3 主题配置编辑 `src/theme.json` 即可自定义主题： ```json { "light": { "bgColor": "#fcfcfc", "navBgColor": "#ff6b00", "tabSelectedColor": "#ff6b00" }, "dark": { "bgColor": "#181818", "navBgColor": "#ff6b00", "tabSelectedColor": "#ff6b00" } } ``` ## 📱 六、实战案例：我的鸿蒙应用 ### 6.1 应用介绍 **uViewPro 鸿蒙应用** 是我用 **uView Pro Starter** 开发的第一款鸿蒙应用，目前已成功上架华为鸿蒙应用市场！点击下载：[**uViewPro(跨平台UI组件库)**](https://uviewpro.cn/zh/resource/harmony.html)，可以沉浸式体验应用内部功能，还可以在应用内直接查看API文档，复制源码！ ![动画11.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/11cc97c30f3b4e68bd8666c5d87ce41a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=egjXGvq85CEcO6qsj2hkPH1jT2c%3D) ### 6.2 核心功能这款应用包含了： #### 🎨 80多个组件演示 * 基础组件：Button、Input、Icon、Image * 表单组件：Form、Checkbox、Radio、Picker * 布局组件：Layout、Grid、Card * 导航组件：Navbar、Tabbar、Tabs * 数据展示：Table、List、Swiper * 反馈组件：Toast、Modal、Loading #### 🛠️ 20多个开发工具演示 * 颜色工具：颜色选择器、主题生成器 * HTTP 工具：请求测试、接口调试 * 规则校验：表单验证、数据校验 ![工具模板.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/441cecce47e64c30989a5abd5fc6bc97~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=sw68qU6doydRIpMfg9A3d6cwiwg%3D) #### 📑 10多个业务模板示例 * 登录界面 * 地址管理 * 评论列表 * 个人中心 * 设置页 #### 🎮 游戏化学习 * 任务系统 * 成就系统 * 体验地图 ![体验地图.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/006cd4f61cd747e5b31d30f4c4bfa2e1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=yHFDtrDI7EMt3YVJzrsq7oQBVFg%3D) #### 🌙 完整暗黑模式 * 自动跟随系统 * 手动切换 * 即时生效 ![暗黑模式.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e9cccff3ede049aca5818a6b7261f66d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YmN56uv5qKm5bel5Y6C:q75.awebp?rk3s=f64ab15b&x-expires=1773649283&x-signature=%2BxumeNZPzs1IXZQki3CseKcsq0w%3D) ### 6.3 开发效率提升使用 **uView Pro Starter** 开发这个应用，可以感受到： | 维度 | 提升幅度 | | ------ | ------------- | | 项目初始化 | 从 2 小时 → 5 分钟 | | 环境配置时间 | 从 1 天 → 30 分钟 | | 功能开发速度 | 提升 3-5 倍 | | 代码复用率 | 达到 90%+ | ## 🎯 七、适用场景 ### 7.1 谁应该使用？ | 人群 | 收益 | | ----------- | ------------- | | uni-app 开发者 | 快速启动项目，减少重复配置 | | Vue 3 开发者 | 学习跨平台开发最佳实践 | | 鸿蒙开发者 | 获取现成的项目模板 | | 创业团队 | 缩短开发周期，快速迭代 | | 个人开发者 | 专注业务，不用造轮子 | ### 7.2 典型使用场景 * 🎯 企业级鸿蒙应用开发 * 📱 多端兼容项目初始化 * 🚀 快速原型验证 * 📚 学习 uni-app 最佳实践 ## 🔧 八、自定义与扩展 ### 8.1 删除不需要的功能这是一个**可定制化**的项目，你可以根据需要删除： | 功能 | 删除方法 | | ----- | --------------- | | 多语言 | 删除 `locale` 目录 | | Pinia | 删除 `stores` 目录 | | 某个页面 | 删除对应页面文件 | | 主题 | 修改 `theme.json` | ### 8.2 如何添加新功能项目结构清晰，添加新功能非常简单： 1. **添加页面**：在 `pages/` 创建目录，添加到 `pages.json` 2. **添加 Store**：在 `stores/` 创建文件 3. **添加组件**：在 `components/` 创建文件 4. **添加 API**：在 `src/api/` 创建文件 ## 🎉 九、总结 **uView Pro Starter** 是一个专注于**快速开发**的开源项目，它解决了鸿蒙应用开发中的「起步难」问题。不止鸿蒙，它是基于 uView Pro 搭建的 uni-app 快速启动项目，一套代码全面兼容 H5、小程序、Android、iOS、鸿蒙多端： ✅ **开箱即用**：项目结构清晰，配置完善\ ✅ **功能丰富**：状态管理、HTTP 拦截、国际化、主题切换...\ ✅ **TypeScript 支持**：类型安全，代码提示\ ✅ **多端兼容**：H5、小程序、App 一键切换\ ✅ **持续维护**：作者亲自维护，问题快速响应如果你正准备开发鸿蒙应用，或者想要一个高质量的多平台开发 uni-app 启动模板，**uView Pro Starter** 是你的最佳选择！ ## 📚 学习资源 * **uView Pro 官网**： * **uView Pro Starter 官网**： * **GitHub**： * **Gitee**： * **沉浸式体验应用**：[**uViewPro(跨平台UI组件库)**](https://uviewpro.cn/zh/resource/harmony.html)