一、HBuilder IDE的下載

HBuilder下載官網地址：

在地址欄中直接輸入https://www.dcloud.io

或者直接點擊下面的鏈接

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流應用、HTML5、小程序開發、跨平臺App、多端框架

進入官網，免費下載最新版的HBuilder。

HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據自己的電腦選擇適合自己的版本。

1. 點擊鏈接進入網站

如下界面：

2. 進入Hbuilder官方網站

如下界面：

3. 下載HBuilder

????????找到下載按鈕【DOWNLOAD】，點擊后會出現一個彈窗，根據電腦版本進行選擇，點擊完成之后便開始進行下載然后進入等待即可。新一代的版本為HBuilder X，上一代的版本為HBuilder。

????????我這里下載的是上一代HBuilder win(258.6M)，點擊后跳轉至如下界面，點擊【普通下載】，即可開始免費下載

4. 解壓安裝包

下載完成后，可以將壓縮包放在合適的位置再進行解壓，便于今后查找、管理

5.?找到執行文件

????????打開解壓后的文件夾，找到一個叫做“HBuilder.exe”的可執行文件，這個可執行文件就是HBuilder的啟動文件。即下圖選中的文件：

?HBuilder不用安裝解壓完成即可使用。

6.?打開HBuilder

????????雙擊這個文件就可以打開HBuilder這個開發編輯器了，因為我們是直接解壓使用的。所以找起來會很麻煩，你可以將【HBuilder.exe】這個執行文件發送到桌面快捷方式，這樣每次使用的時候直接在桌面就可以打開。如下圖所示：

不會創建桌面快捷方式的寶寶看過來：

右擊【HBuilder.exe】這個執行文件，選擇【創建快捷方式】，就會在剛剛的文件下出現一個快捷方式，選中后拖到桌面上就行啦！如下圖：

二、HBuilder IDE的使用

1. 打開HBuilder

雙擊快捷方式或【HBuilder.exe】這個執行文件，會出現如下界面：

2. 登錄HBuilder

有賬號的直接輸入用戶名和密碼進行登錄，沒有賬號的點擊注冊用戶

????????輸入用戶名和密碼后登錄即可?

3. 詳細了解HBuilder編輯器

????????打開之后，你會發現HBuilder的編輯器風格是黃色系，對眼睛比較好，不同于其他編輯器以黑白為主。而且它非常人性化，給你很多的新手入門提示，大家可以詳細看看，對這個軟件也會有一個全面系統的認識。

· 準備工作

（1）新建項目

????????新建一個Web項目，依次點擊【文件】【新建】選擇【Web項目】

? ? ? ? 或者按下Ctrl+N，選擇【Web項目】快速新建

????????如上圖，請在A處填寫新建項目的名稱，B處填寫(或選擇)項目保存路徑(更改此路徑HBuilder會記錄，下次默認使用更改后的路徑)，C處可選擇使用的模板(可點擊自定義模板,參照打開目錄中的readme.txt自定義模板)??

（2）新建HTML文件

????????在項目資源管理器中選擇剛才新建的項目,依次點擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊HTML文件)),并選擇空白文件模板,如下圖：

????????好啦，關于HBuilder IDE的下載與使用就簡單的寫這么多，想繼續了解的可以在底下評論，我再更新博客！如果對你有幫助，可以點贊收藏哦！

總結

以上是生活随笔為你收集整理的HBuilder的下载与使用(详细步骤)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。