从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序（02）

Shaneyxs
54 阅读3分钟

第 2 章：开发环境搭建

“工欲善其事，必先利其器。”

在开始写 Bug 之前，我们需要先把写 Bug 的环境搭好。本章将带你一步步安装所需工具，初始化项目，并跑通第一个 Hello World。

2.1 工具准备清单 (Prerequisites)

请确保你的电脑上安装了以下“神器”：

  1. Node.js (>= 18.0.0)
    • 前端开发的基石。推荐安装 LTS 版本。
    • 验证：终端输入 node -v
  2. pnpm (>= 9.0.0)
    • 比 npm 和 yarn 更快、更节省磁盘空间的包管理器。
    • 安装：npm install -g pnpm
  3. 微信开发者工具 (WeChat DevTools)
  4. VS Code (Visual Studio Code)
    • 宇宙第一代码编辑器。
    • 推荐插件：
      • Vue - Official (Vue3 支持)
      • Prettier - Code formatter (代码格式化)
      • ESLint (代码检查)
      • Uni-app snippets (代码片段)

2.2 前端项目初始化 (Frontend Setup)

我们的项目基于 UniApp + Vite 模板。虽然你已经拿到了现成的代码，但了解它是怎么来的很有必要。

1. 安装依赖

进入项目根目录，运行：

pnpm install

这会读取 package.json，把所有需要的依赖包（Vue, UniApp, UI库等）下载到 node_modules 目录。

2. 环境变量配置

在根目录下，你会看到 .env 文件。这是存放全局配置的地方。

# .env
VITE_APP_TITLE = '活动小管家'
# 云开发环境 ID (关键！)
VITE_CLOUD_ENV_ID = 'your-env-id-here'

2.3 云开发环境配置 (CloudBase Setup)

这是最关键的一步。我们的后端完全依赖腾讯云开发。

1. 开通云开发

  1. 打开微信开发者工具。
  2. 点击工具栏上的 “云开发” 按钮。
  3. 如果是第一次使用，按照指引开通一个新的云环境（推荐选择“按量付费”，有免费额度）。
  4. 记下你的 环境ID (Env ID)，例如 dev-123456。

2. 关联环境

打开 project.config.json (小程序配置文件)，确保 cloudfunctionRoot 指向了我们的 server/ 目录：

{
  "miniprogramRoot": "dist/dev/mp-weixin/",
  "cloudfunctionRoot": "server/",
  ...
}

3. 部署云函数

我们的后端逻辑都在 server/ 目录下。你需要将它们上传到云端：

  1. 在微信开发者工具中，展开 server 目录。
  2. 你会看到 activity, auth, registration 等文件夹。
  3. 右键点击 某个文件夹（如 activity）。
  4. 选择 “上传并部署：云端安装依赖”。
  5. 对所有云函数文件夹重复此操作。

💡 提示：如果你喜欢命令行，也可以使用 @cloudbase/cli 进行部署，但对于新手，右键点击是最直观的。

2.4 第一次运行：Hello World

万事俱备，起飞！🚀

1. 启动开发服务器

在 VS Code 终端运行：

pnpm dev:mp-weixin

这个命令会启动 Vite，将 Vue 代码编译成微信小程序代码，并输出到 dist/dev/mp-weixin 目录。

2. 在微信开发者工具中预览

  1. 打开微信开发者工具。
  2. 导入项目，目录选择 dist/dev/mp-weixin (注意：不是项目根目录！)。
  3. 如果你看到了登录界面或者首页列表，恭喜你，运行成功！

3. 常见问题排查

  • 报错 "CloudID not found"：检查 src/config/index.ts 或 .env 中的云环境 ID 是否填对。
  • 报错 "Function not found"：确认云函数是否已成功上传部署。
  • 样式错乱：确保微信开发者工具中勾选了“将 JS 编译成 ES5”和“使用 npm 模块”（新版通常不需要，但如果遇到怪问题可以试试）。

本章小结： 现在，你的电脑上已经运行起了一个全栈小程序的雏形。前端在本地跑，后端在腾讯云上跑。下一章，我们将深入架构设计，看看这个系统到底是怎么“思考”的。

下一章（03-整体架构设计）

avatar
文章
阅读
粉丝