新手實訓：使用HBuilderX開發工具創建模板項目并運行

【實訓說明】

本實訓主要幫助讀者熟悉HBuilderX開發工具的使用方法和操作流程，學會快速創建uni-app項目。創建項目并運行的主要流程如下。

（1）下載并安裝HBuilderX開發工具。

（2）創建uni-app模板項目。

（3）運行創建的uni-app項目。

實現方法

使用HBuilderX開發工具創建模板項目并運行是初學者在開發項目過程中必須學習的操作，該操作比較簡單，步驟如下。

步驟01 從官網下載HBuilderX開發工具，如圖1-26所示。

步驟02 開發工具安裝完成后，計算機桌面上會出現一個綠色圖標，雙擊圖標即可啟動HBuilderX開發工具。

步驟03 啟動開發工具后，選擇【文件】→【新建】→【項目】選項，進行項目創建，如圖1-27所示。

步驟04 在彈出的【新建項目】對話框中進行項目的配置。這里選擇【uni-app】項目，在下方的文本框中輸入項目名【UniApp】，設置項目路徑為【C:/Users/Administrator/Desktop/FE_Project/uni-app】，選擇模板為【默認模板】，單擊【創建】按鈕，即可創建一個uni-app項目，如圖1-28所示。

步驟05 項目創建成功后，開發工具左側會出現UniApp項目，如圖1-29所示。

步驟06 選擇【運行】→【運行到瀏覽器】→【Chrome】選項，將項目運行到Chrome瀏覽器，如圖1-30所示。

步驟07 單擊運行后，會喚起Chrome瀏覽器，最終運行效果如圖1-31所示。

圖1-26中HBuilderX有幾個不同版本，下面簡單說明各版本的區別。

1. 正式版和Alpha版的區別

（1）Alpha版比正式版更新頻率高，新功能會優先在Alpha版中發布。

（2）Alpha版獨立于正式版，建議在計算機上保留正式版和Alpha版兩個版本，不要互相覆蓋。

（3）Alpha版和正式版各自有獨立的升級機制，不會互相影響。

（4）Alpha版和正式版共用相同的用戶配置，如主題、快捷鍵設置、代碼塊設置等，但插件需要各自安裝。

（5）Alpha版和正式版只能同時啟動一個版本。先啟動正式版，再啟動Alpha版會激活已經開啟的正式版，反之亦然。

2. 標準版和App開發版的區別

HBuilderX標準版可直接用于Web開發、Markdown文字處理場景，但開發App時仍需安裝插件。App開發版預置了App/uni-app開發所需插件，可直接使用。App開發所需安裝插件體積大的原因主要有兩個方面。

（1）包含真機運行基座，Android版、iOS版、iOS模擬器版運行基座體積加起來有一百多兆字節。真機運行基座需要把所有模塊都內置進去，方便進行開發調試。

（2）uni-app的編譯器依賴webpack和各種node模塊，node_modules現有生態就是如此，文件非常多（多達幾萬個），解壓起來很慢。

如果使用vue-cli創建項目，編譯器會在項目下。另外，如果不開發App，只用uni-app開發小程序和H5，那么使用標準版就可以。讀者應根據自身實際使用情況選擇所需版本進行下載，這里選擇App開發版。