官方学习视频链接：鸿蒙应用开发实战课-华为开发者学堂

编译器安装教程请参考官方文档，这边没有说明，这篇文章主要是简要介绍一下ArkUI开发，后面会持续更新内容

我们先创建一个新的项目，点击DevEco编译器，打开界面，点击新建项目

选择Empty Ability，点击Next

这边更改你的Project name（也可以不改），点击Finish，项目就创建成功了

学过uni-app开发的朋友应该会觉得这个项目结构挺相像的，Index.ets就是主页面，如果你需要修改初始运行页面文件的话，可以往下看，下面有说明

以下截图，是一个示例，也是说明，要实现一个页面，必须要包含4要素（标注在代码中了），这是一个纯前端页面，设置事件，点击按钮改变页面文字，实现效果和代码在下面，这边使用预览器展示运行结果，之前的文章有用到虚拟机，那个需要下载镜像文件

@Entry//要素1：@Entry
@Component//要素2：@Component
struct Index {//要素3：struct
  @State message: string = 'World';
  build() {//要素4：build，注意build函数中如果有组件的话，只能有一个根组件
    Column(){
      Text(`Hello ${this.message}`)//这边不是单引号，是反引号``
        .fontSize(40)
        .margin({top:300})
      Divider()
      Button('Please Click')
        .onClick(()=>{
          this.message='沙雕不是雕'
        })
        .fontSize(35)
        .height(80)
        .width(300)
        .margin({top:20})
    }
  }
}

假设你现在更改了页面代码，换了主意想要先运行另一个页面文件，找到EntryAbility.ets文件（路径：src/main/ets/entryability/EntryAbility.ets），找到下图红色矩形框起来的部分，将pages/Index中的Index更换为别的页面文件名，假设你新建了一个login.ets页面文件，那就更改为pages/login，无需加ets后缀