# 如何在 DevEco Studio 中创建第一个 ArkTS 应用？

> 在 DevEco Studio 中使用 ArkTS 和 ArkUI 创建、理解并运行 Hello World 应用：项目模板、目录结构、Index.ets 代码、签名以及在设备上运行。

来源: https://ohosify.com/zh/blog/first-arkts-app
发布: 2026-10-01

**简短回答：** 在 DevEco Studio 中使用 **Application > Empty Ability** 模板创建新项目，打开 `entry/src/main/ets/pages/Index.ets`，选择设备或模拟器后点击 **Run**。模板中已经包含一个用 ArkTS 和 ArkUI 写成的可运行 Hello World 页面。

## 开始之前需要什么？

- 已安装的 DevEco Studio，见[如何安装 DevEco Studio](/zh/blog/install-deveco-studio)。
- 一个运行目标：模拟器，或已开启开发者模式并连接的设备。

## 如何创建项目？

1. 打开 DevEco Studio，新建项目。
2. 选择 **Application**，再选择 **Empty Ability** 模板。
3. 填写项目信息：项目名称、Bundle name（第一个应用保持默认即可）、Compatible SDK（例如 `5.0.0(12)`）以及模型 **Stage**。
4. 完成创建并等待项目同步。

注意：自 DevEco Studio 4.1 Beta1 起，新建项目默认面向 HarmonyOS。如需面向 OpenHarmony，请修改项目级的 `build-profile.json5`：

```json
"compileSdkVersion": 12,
"compatibleSdkVersion": 12,
"runtimeOS": "OpenHarmony"
```

## 项目目录里有什么？

| 路径 | 用途 |
|---|---|
| `AppScope/app.json5` | 应用级配置 |
| `entry/src/main/ets/entryability` | 应用入口 |
| `entry/src/main/ets/pages` | 页面文件，如 `Index.ets` |
| `entry/src/main/resources` | 图片、媒体、字符串和布局等资源 |
| `entry/src/main/module.json5` | 模块配置 |
| `entry/build-profile.json5` | 模块构建选项 |
| `oh_modules` | 已安装的依赖 |
| `hvigorfile.ts` | 构建脚本 |

## Index.ets 里有什么？

模板会创建一个包含文本和一个跳转到第二个页面的按钮的页面。它最简单的形式如下：

```ts
@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` 声明一个 UI 组件，`@State` 让 `message` 具有响应性，`build()` 描述界面。把 `'Hello World'` 改成你自己的文字再运行，就能看到变化。详见[什么是 ArkTS？](/zh/blog/what-is-arkts)。

## 如何运行应用？

1. 连接设备（或启动模拟器）。如需确认设备可见，请参阅 [hdc 命令指南](/zh/blog/hdc-command-guide)。
2. 使用真机时，在 **File > Project Structure > SigningConfigs** 中启用自动签名。
3. 在工具栏选择设备并点击 **Run** 按钮。

不同版本的 DevEco Studio 菜单名称可能不同，如果菜单与本文不一致，请参考[官方教程](https://github.com/openharmony/docs)。

## 后续步骤

- [什么是 ArkTS？](/zh/blog/what-is-arkts)
- [hdc 命令指南](/zh/blog/hdc-command-guide)
- [OpenHarmony 与 HarmonyOS 的区别](/zh/blog/openharmony-vs-harmonyos)