HBuilderX 创建 Vue3 uniCloud 项目

前置必备条件

1. 安装最新版HBuilderX，登录 DCloud 账号，完成实名认证（不实名无法创建服务空间）
2. 浏览器可正常访问 uniCloud 后台控制台
3. 服务空间选用支付宝云（免费资源最多：免费 Redis、HTTPS、websocket、备案码）

第一部分：HBuilderX 新建 Vue3 版 uniCloud 项目

步骤 1：新建 uni-app 项目

1. 顶部菜单栏：文件 → 新建 → 项目

2. 项目分类选择：uni-app

3. 填写项目名称、本地存放路径

4. Vue 版本勾选：Vue3（视频指定 Vue3 官方推荐用法）

5. 关键配置：勾选启用 uniCloud，服务商下拉选择「支付宝云」

• 点击「创建」，生成项目目录

• 项目创建完成后，左侧目录会自动出现uniCloud文件夹，文件夹右侧标注：支付宝云 - 未关联云服务空间。

第二部分：创建支付宝云服务空间

步骤 2：打开关联服务空间弹窗

1. 在左侧项目树，右键点击uniCloud文件夹

2. 右键菜单选择：关联云服务空间或项目 (S)

3. 弹出窗口内，点击右上角+ 新建按钮，自动跳转浏览器 uniCloud 控制台创建页面

地址：uniCloud控制台

点击新建服务空间，弹出如图所示的新建弹窗

步骤 3：服务空间配置填写

1. 服务商选择：选中「支付宝云」（视频推荐，对比阿里云 / 腾讯云）
   • 支付宝云福利：免费服务空间、备案码、websocket、免费 Redis、HTTPS 证书托管
   • 限制规则：一个支付宝账号仅能创建 1 个免费服务空间，已创建免费版只能选包年包月
2. 服务空间名称（严格遵守 3 条命名规则，视频重点标注）
   1. 仅允许：小写英文字母、数字、短横线-
   2. 必须小写字母开头，不能数字 / 符号开头
   3. 字符长度限制：3 ~ 25 位
3. 付费方式选择
   • 免费：账号未创建过免费空间可选，仅限测试学习
   • 包年包月：已有免费空间必须选付费；视频提示：包月 CDN 流量极易超标，建议额外购买扩展存储
4. 套餐版本：基础版（入门学习首选）
5. 核对全部信息，点击页面底部「创建服务空间」
6. 等待 30~60 秒系统分配云资源，提示创建成功

第三部分：HBuilderX 项目关联已创建的服务空间

步骤 4：回到 HBuilderX 完成绑定

1. 浏览器创建完成后，切回之前的「关联云服务空间」弹窗，点击右上角刷新按钮
2. 列表中会出现刚刚创建的zfb-demo服务空间，勾选该行
3. 弹窗底部点击关联 (L)按钮，完成项目与云空间绑定

步骤 5：验证关联成功

1. 左侧项目树uniCloud文件夹右侧文字变更：显示空间 ID / 名称，不再提示「未关联」
2. 右键uniCloud→ 打开 uniCloud Web 控制台，可直接跳转当前绑定空间后台
3. 目录自动生成标准云开发目录

第四部分：创建后基础配套操作

1. 初始化云空间右键uniCloud→ 运行云服务空间初始化向导，自动生成 uni-id 用户体系基础文件
2. 上传云资源到云端右键cloudfunctions/database→ 上传部署，本地代码同步到支付宝云服务器
3. 套餐避坑提示：

• 免费空间资源有限，仅用于学习测试，上线项目务必升级包年包月
• 包月套餐 CDN 流量消耗快，图片 / 文件多的业务需单独购买扩展存储
• 支付宝免费 Redis 仅提供基础容量，高并发场景需付费扩容

常见报错 & 限制

1. 服务空间名称报错：检查是否大写、下划线、数字开头、长度超限
2. 无法创建免费空间：账号已占用唯一免费名额，只能付费
3. 关联列表看不到新建空间：点击弹窗刷新，或等待 1 分钟资源分配完成
4. 未实名无法创建：先去 DCloud 个人中心完成实名认证
5. 多项目共用空间：关联弹窗可选择「绑定其他项目的服务空间」，实现多项目共用一套云资源

附：上传文件到服务空间的云存储

复制右侧下载地址，可在浏览器中查看。