一、HBuilder IDE的下載

HBuilder下載官網(wǎng)地址：

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

或者直接點(diǎn)擊下面的鏈接

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流應(yīng)用、HTML5、小程序開(kāi)發(fā)、跨平臺(tái)App、多端框架

進(jìn)入官網(wǎng)，免費(fèi)下載最新版的HBuilder。

HBuilder目前有兩個(gè)版本，一個(gè)是windows版，一個(gè)是mac版。下載的時(shí)候根據(jù)自己的電腦選擇適合自己的版本。

1. 點(diǎn)擊鏈接進(jìn)入網(wǎng)站

如下界面：

2. 進(jìn)入Hbuilder官方網(wǎng)站

如下界面：

3. 下載HBuilder

????????找到下載按鈕【DOWNLOAD】，點(diǎn)擊后會(huì)出現(xiàn)一個(gè)彈窗，根據(jù)電腦版本進(jìn)行選擇，點(diǎn)擊完成之后便開(kāi)始進(jìn)行下載然后進(jìn)入等待即可。新一代的版本為HBuilder X，上一代的版本為HBuilder。

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

4. 解壓安裝包

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

5.?找到執(zhí)行文件

????????打開(kāi)解壓后的文件夾，找到一個(gè)叫做“HBuilder.exe”的可執(zhí)行文件，這個(gè)可執(zhí)行文件就是HBuilder的啟動(dòng)文件。即下圖選中的文件：

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

6.?打開(kāi)HBuilder

????????雙擊這個(gè)文件就可以打開(kāi)HBuilder這個(gè)開(kāi)發(fā)編輯器了，因?yàn)槲覀兪侵苯咏鈮菏褂玫摹Ｋ哉移饋?lái)會(huì)很麻煩，你可以將【HBuilder.exe】這個(gè)執(zhí)行文件發(fā)送到桌面快捷方式，這樣每次使用的時(shí)候直接在桌面就可以打開(kāi)。如下圖所示：

不會(huì)創(chuàng)建桌面快捷方式的寶寶看過(guò)來(lái)：

右擊【HBuilder.exe】這個(gè)執(zhí)行文件，選擇【創(chuàng)建快捷方式】，就會(huì)在剛剛的文件下出現(xiàn)一個(gè)快捷方式，選中后拖到桌面上就行啦！如下圖：

二、HBuilder IDE的使用

1. 打開(kāi)HBuilder

雙擊快捷方式或【HBuilder.exe】這個(gè)執(zhí)行文件，會(huì)出現(xiàn)如下界面：

2. 登錄HBuilder

有賬號(hào)的直接輸入用戶名和密碼進(jìn)行登錄，沒(méi)有賬號(hào)的點(diǎn)擊注冊(cè)用戶

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

3. 詳細(xì)了解HBuilder編輯器

????????打開(kāi)之后，你會(huì)發(fā)現(xiàn)HBuilder的編輯器風(fēng)格是黃色系，對(duì)眼睛比較好，不同于其他編輯器以黑白為主。而且它非常人性化，給你很多的新手入門(mén)提示，大家可以詳細(xì)看看，對(duì)這個(gè)軟件也會(huì)有一個(gè)全面系統(tǒng)的認(rèn)識(shí)。

· 準(zhǔn)備工作

（1）新建項(xiàng)目

????????新建一個(gè)Web項(xiàng)目，依次點(diǎn)擊【文件】【新建】選擇【W(wǎng)eb項(xiàng)目】

? ? ? ? 或者按下Ctrl+N，選擇【W(wǎng)eb項(xiàng)目】快速新建

????????如上圖，請(qǐng)?jiān)贏處填寫(xiě)新建項(xiàng)目的名稱，B處填寫(xiě)(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會(huì)記錄，下次默認(rèn)使用更改后的路徑)，C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開(kāi)目錄中的readme.txt自定義模板)??

（2）新建HTML文件

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

????????好啦，關(guān)于HBuilder IDE的下載與使用就簡(jiǎn)單的寫(xiě)這么多，想繼續(xù)了解的可以在底下評(píng)論，我再更新博客！如果對(duì)你有幫助，可以點(diǎn)贊收藏哦！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。