UniApp + Cursor + Devbox 全栏平台开发教程：从0到完整项目打造

本文基于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/              # 页面目录