下載并安裝DevEco Studio，這是華為官方提供的HarmonyOS應用開發IDE。訪問華為開發者聯盟官網下載對應操作系統的版本。安裝完成后，配置HarmonyOS SDK和必要的工具鏈。

確保計算機滿足開發環境要求，包括Windows 10 64位或macOS 10.14及以上操作系統，8GB以上內存，以及至少10GB的可用硬盤空間。

創建第一個HarmonyOS項目

官網地址：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Next-HelloWorld

打開DevEco Studio，選擇“Create HarmonyOS Project”創建一個新項目。

選擇適合的模板，如“Empty Ability”作為起點。配置項目名稱、包名和存儲路徑，確保選擇正確的設備類型和API版本。選擇Compatible SDK為5.0.5(17)，在編譯構建時，DevEco Studio會根據指定的Compatible SDK版本進行編譯打包。

DevEco Studio會默認勾選除‘Car’以外的全部Device type，保持該選項即可。

項目創建完成后，DevEco Studio會自動生成基本項目結構，包括配置文件、資源文件和初始代碼。熟悉項目目錄結構，重點關注entry/src/main目錄下的config.json、resources和java文件夾。

編寫基礎UI界面

在Project導航欄中選中 entry -> src -> main -> ets -> pages -> Index.ets，即可看到初始創建項目的模板代碼。

@Entry裝飾的@Component將作為UI頁面的入口。在單個UI頁面中，最多可以使用@Entry裝飾一個自定義組件。
其中，@Component裝飾器裝飾了struct關鍵字聲明的數據結構Index。
Index被@Component裝飾后具備組件化的能力，通過實現build方法描述UI。

界面由RelativeContainer相對布局容器作為根容器，RelativeContainer支持容器內部的子元素設置相對位置關系，適用于界面復雜場景的情況，對多個子組件進行對齊和排列。

定義字體大小fontSize取值為$r('app.float.page_text_font_size')資源類型；定義文本的字體粗細fontWeight取值為Bold，即字體較粗。

字體大小等數據的值一般存儲在/entry/src/main/resources/base/element/float.json文件下，可以按照上文page_text_font_size的方式保存至float.json文件中，并通過$r('app.float.xxx')進行資源引用。

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize($r('app.float.page_text_font_size')).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {this.message = 'Welcome';})}.height('100%').width('100%')}
}

alignRules屬性用于指定設置在相對容器中子組件的對齊規則，僅當父容器為RelativeContainer時生效，在這里定義Text組件橫向居中和縱向居中。

開啟右邊欄的Previewer，預覽器將工程中的@Entry作為實現入口，自動實現預覽