熊大科技君专注鸿蒙开发实战教学，本文为新手整理了DevEco Studio完整入门实操教程，从环境准备到代码编写、预览调试，一步步带你上手鸿蒙应用开发，全程实操可直接跟着做。

DevEco Studio 是华为鸿蒙（HarmonyOS）官方IDE，核心开发语言为 ArkTS（类TS/前端），搭配 ArkUI 组件化开发，整体流程简洁：新建工程→熟悉目录→编写ArkTS→预览/模拟器→调试，新手可按以下步骤逐步操作。

一、准备与新建项目

核心前提：安装DevEco Studio（版本≥5.0），并完成SDK与模拟器的环境配置（安装过程略，可参考华为官方文档）。

新建工程步骤：

1. 创建入口：软件首页点击 Create Project，或通过顶部菜单 File → New → Create Project 进入。

2. 选择模板：勾选 Application → Empty Ability（空白模板），点击Next。

3. 项目配置：填写 Project Name（示例：MyFirstApp）、选择 Compatible SDK（推荐5.0.0(12)）、设备类型选择「手机」，点击Finish。

4. 等待项目自动生成基础目录与初始代码，直至索引加载完成（底部进度条消失即可）。

二、核心目录结构（重点记忆）

日常开发无需记住所有目录，重点掌握以下核心路径即可，其余目录可后续逐步了解：

entry/src/main/
├── ets/
│   ├── entryability/   # 应用入口，管控应用生命周期
│   └── pages/          # 核心编码区，存放所有页面
│       └── index.ets   # 默认首页，主要开发文件
├── resources/          # 静态资源目录（图片、文字、颜色等）
└── module.json5        # 模块配置（页面路由、应用权限等）

三、编写第一个ArkTS页面（HelloWorld实操）

找到路径：entry/src/main/ets/pages/index.ets（默认首页），删除原有代码，复制以下完整代码覆盖，保存即可：

// 装饰器：声明页面唯一入口
@Entry
// 装饰器：定义可复用自定义组件
@Component
struct Index {
  // 状态变量：数据变更时自动刷新UI（响应式）
  @State message: string = 'Hello DevEco Studio!';

  // UI构建核心函数（必写，用于描述页面布局）
  build() {
    // 根容器：全屏相对布局，包裹所有页面组件
    RelativeContainer() {
      // 文本组件：展示核心内容
      Text(this.message)
        .fontSize(24)          // 文字字号
        .fontWeight(FontWeight.Bold) // 文字加粗
        .fontColor('#007DFF') // 文字颜色（蓝色）
        // 约束文本居中显示
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        // 点击事件：点击文字修改内容
        .onClick(() => {
          this.message = '你好，鸿蒙！';
        })
    }
    .width('100%') // 容器宽度全屏
    .height('100%') // 容器高度全屏
    .backgroundColor('#F5F5F5') // 页面背景色（浅灰）
  }
}

关键语法说明（新手必记）

• @Entry：标识当前页面为入口页面，一个页面只能有一个。

• @Component：声明自定义组件，组件可复用（后续进阶会用到）。

• @State：响应式状态变量，只要变量值改变，页面UI会自动刷新。

• build()：UI构建函数，必须编写，用于描述页面所有组件的布局和样式。

• 组件链式调用：Text().fontSize().onClick()，简洁高效，是ArkTS核心写法。

四、编码常用快捷键（提高开发效率）

常用快捷键整理（适配Windows/macOS，新手必记）：

• 格式化代码：WindowsCtrl+Alt+L / macOS Option+Command+L

• 注释/取消注释：Ctrl+/（支持单行、选中块注释）

• 代码折叠：点击编辑器左侧「-」，或右键选择「Collapse」

• 查找引用：选中变量/函数 → 右键 → Find Usages（快捷键 Alt+F7）

• 快速查阅API：鼠标悬停组件/API，自动显示参数说明

• 生成函数注释：在函数上方输入 /** 后按回车，自动生成注释模板

五、预览与运行（即时查看效果）

两种方式，新手优先用「实时预览」，快速验证代码；模拟器用于查看真实运行效果。

1. 实时预览（最常用）

打开 index.ets 页面，点击编辑器右上角「Preview」（眼睛图标），右侧会实时渲染页面效果，修改代码后秒更新，无需编译，高效便捷。

2. 模拟器运行（真实效果验证）

1. 启动模拟器：顶部菜单 → Tools → HVD Manager，选择手机设备（如Huawei_Phone），点击绿色三角启动。

2. 运行项目：点击工具栏绿色三角（Run），快捷键 Shift+F10，选择已启动的模拟器，等待应用自动安装并启动。

3. 预期效果：点击页面中的文字，会从「Hello DevEco Studio!」切换为「你好，鸿蒙！」。

六、调试基础（排错必备）

代码出错不用慌，掌握基础调试方法，快速定位问题：

1. 设置断点：点击代码行号左侧，出现红色圆点即为断点（程序运行到此处会自动暂停）。

2. 启动调试：点击工具栏「Debug」（虫子图标），选择模拟器，进入调试模式。

3. 常用调试操作：

   1. Step Over（F8）：逐行执行代码，不进入函数内部。

   2. Step Into（F7）：进入函数内部，查看详细执行逻辑。

   3. Variables面板：实时查看当前所有变量的数值，快速定位错误原因。

七、下一步学习方向（新手进阶）

入门后，可按以下顺序逐步深入学习，夯实鸿蒙开发基础：

1. ArkUI常用组件：Text、Button、Image、List、Grid 等核心组件的用法。

2. 状态管理：深入学习 @State、@Prop、@Link、@Provide/@Inject 等状态管理方式。

3. 页面路由：掌握 router.pushUrl() 方法，实现多页面跳转交互。

4. 资源引用：学会用 $r('app.string.xxx') 引用项目中的字符串、图片等静态资源。

本文由熊大科技君原创

#熊大科技君