这篇博文将手把手带你创建第一个鸿蒙应用项目，并让它成功运行起来。

🎯 创建新项目

首先，启动DevEco Studio，你会看到欢迎页面。在这里找到并选择 Create Project 来开启一个新项目。如果你已经打开了一个项目，也可以通过菜单栏的 File > New > New Project 来创建。

接下来，你需要选择一个项目模板。对于初学者，建议选择 "Application" 类型下的 "Empty Ability" 模板，这是一个标准的单页面应用起点，工具会自动生成一些基础代码。

选好模板后，点击 Next，进入项目配置页面。这里需要你填写项目的基本信息，请参考下表进行配置：

配置项	填写说明	建议与示例
Project Name	工程名称	如 MyFirstApp，路径避免中文或空格。
Bundle Name	应用包名	域名倒写格式，如 com.example.myapp。
Save Location	存储路径	选择本地熟悉路径。
Compile SDK	SDK版本	推荐稳定版本。
Model	应用模型	选择 Stage模型。
Language	开发语言	选择 ArkTS。

配置完成后，点击 Finish，DevEco Studio会自动生成项目文件并完成初始化同步。

📁 初识项目结构

项目创建成功后，我们来快速了解一下标准鸿蒙项目的核心目录结构，这能帮你更好地组织代码。

目录/文件	作用
AppScope/	应用全局资源与配置。
app.json5	应用名称、版本等全局配置。
entry/	核心模块，主要代码编写区域。
src/main/ets/	ArkTS源代码目录。
entryability/	Ability相关文件。
pages/	页面文件，默认包含Index.ets。
src/main/resources/	资源文件（图片、字符串等）。
module.json5	模块配置（权限、组件等）。

✨ 编写并预览第一个页面

现在，让我们打开并查看第一个页面。在entry/src/main/ets/pages/目录下，找到并打开Index.ets文件。

你会看到类似以下的默认代码，它已经构成了一个显示"Hello World"的完整页面：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

• @Entry：装饰器，表示这个组件是页面的入口组件。

• @Component：装饰器，表示这是一个自定义组件。

• @State：装饰器，修饰了message这个变量，它是一个状态变量。当它的值改变时，会触发UI重新渲染。

• build()：方法，用于构建组件的UI描述。

你可以尝试将 message 的值从 'Hello World' 修改为 '你好，鸿蒙！'，然后保存文件。

要实时查看UI效果，可以点击编辑窗口右上角侧边工具栏的 Previewer 按钮。预览器会立即显示修改后的文本，这非常利于调试UI。

🚀 运行项目

在真实设备或模拟器上运行应用，能获得更完整的体验。

在模拟器中运行

1. 安装模拟器：点击工具栏的 Tools > Device Manager。在设备管理中，根据指引下载并安装一个模拟器镜像，例如Phone。

2. 运行项目：模拟器安装成功后，在DevEco Studio顶部的运行配置下拉菜单中，选择你刚安装的模拟器，然后点击旁边的 Run 按钮。

3. 查看结果：DevEco Studio会自动将应用安装到模拟器并启动它。稍等片刻，你就能在模拟器屏幕上看到你的"Hello World"应用了。

在真机中运行

如果你有鸿蒙系统的真机设备，真机调试的效果是最好的。

1. 开启开发者模式：进入手机的设置-关于手机，连续点击 "版本号" 7次，直到出现输入密码的提示，此时你已处于开发者模式。

2. 开启USB调试：返回设置，进入系统和更新，找到 "开发人员选项"，开启 "USB调试" 功能。

3. 连接电脑并运行：使用USB数据线连接电脑和手机。在DevEco Studio的运行设备列表中选择你的手机，点击 Run。首次连接时，手机上可能会弹出授权提示，点击允许即可。

🔧 进阶与排查

添加一点交互

让我们的应用不仅仅是静态文本。你可以修改Index.ets的代码，添加一个按钮来实现交互：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('点击我')
          .onClick(() => {
            this.message = 'Hello HarmonyOS!'
          })
          .margin({ top: 20 })
      }
      .width('100%')
    }
    .height('100%')
  }
}

保存后，在预览器或运行的应用中点击按钮，你会发现文本内容从"Hello World"变成了"Hello HarmonyOS!"。这得益于ArkTS的响应式设计，当@State修饰的message变量改变时，引用它的Text组件会自动更新。

遇到问题怎么办？

• 模拟器无法启动：检查电脑是否开启了虚拟化支持（如Intel VT-x或AMD-V），并确保已安装必要的虚拟化平台（如Windows上的Hyper-V）。

• 项目同步失败：检查网络连接是否稳定。可以尝试点击 File > Invalidate Caches / Restart... 清理缓存并重启IDE。

• "arkts-no-props-by-index"错误：这是ArkTS的语法限制，表示不支持通过索引访问对象属性，应使用点表示法或Map结构替代。

恭喜你！至此，你已经成功创建、编写并运行了你的第一个鸿蒙应用。这只是一个开始，接下来你可以继续探索如何使用更多的UI组件、页面路由以及鸿蒙独特的分布式能力，去构建更加强大的应用。