前端开发者的鸿蒙第一课：5 分钟搭好开发环境 🥦

大家好，我是盐焗西兰花，一个正在把 npm install 炒成 ohpm install 的前端厨子^_

最近好多朋友问我：“我想试试鸿蒙，但 DevEco Studio 下了半小时还没装完，是不是我电脑不行？”

别慌！不是你不行，是没人告诉你"灶台怎么点火"。

今天这篇，我就手把手带你配齐鸿蒙开发的“锅碗瓢盆”——
从零到跑通第一个页面，全程不超过 5 分钟（不含下载时间）！

🔥 重要提醒：
本文针对 HarmonyOS Next（纯鸿蒙，无 AOSP） 开发，使用 ArkTS + 声明式 UI。
如果你还在看“JS FA”或“类 Web 开发”，请升级认知——那是上一代！

---

1. 安装 DevEco Studio（鸿蒙的"VS Code"）

步骤 1：去官网下安装包

• 官网地址 👉 https://developer.harmonyos.com/cn/develop/deveco-studio
• 点击 “下载 DevEco Studio”（选最新稳定版就行，别纠结版本号）

⏳ 提示：安装包约 1GB，如果直接下载速度较慢，选用任意你觉得快的下载工具（比如迅雷或者挂个代理。国内网络有时抽风，别问我怎么知道的 o(╯□╰)o）

---

步骤 2：安装时注意这 3 点！

1. 绝对不要用中文路径！
   安装目录必须全英文，比如 D:\DevEco 就可以，D:\开发工具 就可能无法运行。当然如果你用中文路径成功运行起来了，也没有问题。（┓( ´∀` )┏）

   🥦 西兰花警告：
   我有个朋友第一次装在"D:/鸿蒙学习"，结果项目创建失败，debug 两小时！血泪教训啊朋友们！

2. 开发环境会自动配置，别瞎操心
   DevEco 会自带完整的开发环境，安装时也会自动诊断，根据提示安装即可
   注：如果安装时的自动诊断不小心关掉了，可以在 菜单->帮助->诊断工具->诊断开发环境

3. 注册 and 登录华为账号（必须实名！）
   后续开发都需要用华为账号登录，所以还没华为账号的抓紧时间注册+实名。提示登录的时候登录自己的账号即可。
   可以来这里，点击页面的右上角进行注册：开发者文档-开发准备
   

   ❗ 未实名 = 无法用模拟器 + 无法真机调试！这一步绝对不能省！

---

2. 创建你的第一个项目

步骤 1：新建项目

• 打开 DevEco Studio → 点 “Create Project”

• 选择模板：Application → Empty Ability（这是最干净的起点，没多余代码）

• 路径：选在英文路径下，比如 D:\Projects\HelloBroccoli

• 其他如非必要，使用默认即可，
  

  更为详细的说明可以参考：开发者文档-创建项目

---

步骤 2：看懂项目结构（对标 Vue CLI）

创建后，你会看到类似这样的目录结构,（只包含了项目的核心目录）：

项目目录/
├── AppScope/           ← 应用全局配置
│   └── app.json5       ← 应用全局配置文件
├── entry/              ← 主模块（生成HAP包）
│   ├── src/
│   │   └── main/
│   │       ├── ets/    ← ArkTS代码主目录
│   │       │   ├── entryability/  ← 应用入口
│   │       │   └── pages/         ← 页面目录
│   │       │       └── Index.ets  ← 主页面（相当于App.vue）
│   │       ├── resources/         ← 资源文件（图片、字符串等）
│   │       └── module.json5       ← 模块配置文件
│   ├── build-profile.json5        ← 模块构建配置
│   └── hvigorfile.ts              ← 模块构建脚本
├── oh-package.json5     ← 依赖管理（类似package.json）
└── oh_modules/          ← 三方库依赖
.....

💡 前端老司机看这里：

• 所有 UI 代码都写在.ets文件里，这是 ArkTS 的文件扩展名
• 页面代码放在entry/src/main/ets/pages/目录
• 图片资源要放entry/src/main/resources/base/media/目录，别乱塞
• 没有node_modules，取而代之的是oh_modules目录，依赖用ohpm管理（就像 npm 一样用）
• 应用入口在entryability目录，相当于 Vue 项目的main.js

更为详细的说明可以参考：开发者文档-项目结构。

3. 跑起来！四种方式任选

方式 1：用预览器（最快最轻便！）

如果你只是想快速看看页面效果，预览器绝对是首选！不需要启动模拟器，也不用连手机，秒出效果~\n

1. 打开 entry/src/main/ets/pages/Index.ets 文件

2. 点击右侧的 预览器 标签页（就在编辑区右边）

3. 等待预览器初始化（首次可能要 30 秒左右）

4. 现在你可以直接看到页面效果了！修改代码会实时更新哦~\n
   

   🥦 西兰花小贴士：
   预览器就像前端的 “实时预览”，适合快速调试 UI 和样式，特别适合新手练手！

---

方式 2：用本地模拟器（适合完整测试）

如果需要测试完整功能，模拟器是个好选择，详细的官方文档可以参考：开发者文档-创建模拟器

1. 顶部菜单栏点 Tools → Device Manager
2. 点 “+” → 选一个 Phone 设备（比如 Pixel 6 就行）
3. 等待模拟器启动（首次可能要 1-2 分钟，别着急）
4. 点绿色 ▶️ 按钮，自动编译并安装到模拟器

⚠️ 如果模拟器黑屏：

• 检查显卡驱动是不是最新的
• 如果还是不行，干脆删掉重装模拟器（别跟它较劲）

---

方式 3：用真机调试

模拟器无法 100%模拟真机的所有功能，这个时候就可以使用真机调试，详细的官方文档可以参考：开发者文档-真机调试

1. 手机升级到 HarmonyOS Next+
2. 开启 “开发者模式” + “USB 调试”（不懂怎么开？点上面的链接）
3. USB 连电脑 → DevEco 会自动识别你的手机
4. 点 ▶️ 直接安装到手机

---

方式 4：云调试（收费喔）

云调试是华为提供的一种方便的调试方式，不需要连接物理设备，直接在云端进行调试。
详细的官方文档可以参考：开发者文档-云调试
模拟器已经可以解决大部分问题，云调试主要解决的是真机调试的一些限制，比如性能问题、多设备调试等。
📱 真机体验最流畅，强烈推荐！尤其是要测性能的时候

---

4. 验证：修改代码，看效果实时更新

打开 entry/src/main/ets/pages/Index.ets，你会看到默认代码（不一定和下文一致，但是基本结构是一样的）：

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Text('Hello World')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

现在，把 'Hello World' 改成 'Hello, 西兰花!'，保存（Ctrl+S）。

✅ 如果你用的是预览器页面会自动刷新，如果是模拟器或者真机，重新运行即可

🎉 恭喜！你已经成功跑通第一个鸿蒙应用！是不是超简单？

5. 🥦 西兰花警告：常见报错 & 解决方案

可以参考开发者文档-下载与安装 DevEco Studio
或者 直接使用 官方文档的搜索或者直接问小艺同学，现在搜索已经接入了 AI 功能，谁用谁知道

6. 下一步学什么？

环境搭好了，灶台也热了，下篇咱们就正式开炒！

👉 预告：《只会 HTML/CSS？别慌，鸿蒙页面没你想的那么难！》
（我们将用熟悉的布局知识，写出第一个商品卡片）

📚 推荐资料：

• 官方入门教程：开发者学堂
• 视频：B 站全网首套鸿蒙 5.0 零基础入门到项目实战开发全套视频教程

---

我是盐焗西兰花，
不教理论，只给你能跑的代码和避坑指南。
下期见！🥦

---

需要参加鸿蒙认证的请点击 鸿蒙认证链接