本文基于B站热门教程《一口气学会小程序 / App / H5开发：UniApp教程 + Cursor + Devbox》，https://www.bilibili.com/video/BV1W7QZYMEus/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=a1428945043b2df41c1896acb90d942a，进行全面扩展和教程重构，目标是搭建一套真正可用、可扩展、可实际运行的前后端开发实战环境。
一、开发模型概述
1.1 开发模型特点
这次我们采用的开发模型有以下特点：
- 使用 UniApp 一次开发，支持多端构建（H5/小程序/App）
- 搭配 Cursor AI IDE，进行代码生成、说明、优化
- 用 Devbox 搭建本地 Node.js/前后端环境
- 基于 Vue.js 和 uni-app API组合
1.2 适用场景
- 新手入门前端/全栏开发
- 需要快速设计原型或 MVP 环境
- 可应用于竞赛、项目 demo 快速打造
二、环境搭建
2.1 安装 HBuilderX
下载地址：https://www.dcloud.io/hbuilderx.html
安装后，打开 HBuilderX：
- 菜单 「文件 → 新建 → 项目 → uni-app 项目」
- 选择模板：推荐使用「Hello uni-app」模板
- 输入项目名称，选择目录，创建
2.2 安装 Devbox
官网：https://www.jetpack.io/devbox
Devbox 安装指令
macOS:
brew install devbox
Ubuntu:
curl -fsSL https://get.jetpack.io/devbox | bash
初始化项目环境：
devbox init
修改 devbox.json：
{"packages": ["nodejs", "npm"]
}
启动 devbox shell:
devbox shell
2.3 安装 Cursor IDE
官网：https://www.cursor.so/
- 下载并安装 Cursor
- 打开项目文件夹
- 登录 OpenAI API，使用 AI 编程助手
Cursor 支持以下功能：
- 代码生成
- 代码说明/添述注释
- bug 自动修复
- 分析功能模块
三、UniApp 项目目录结构解析
🔽— pages/ # 页面目录</
