HBuilder下載和安裝【圖文教程】

HBuilder是一款深度集成Eelipse的IDE編輯器，但其主要集中在Web前端的開(kāi)發(fā)，不能進(jìn)行Java等后臺(tái)開(kāi)發(fā)。HBuilder提供了對(duì)JavaScrijpt、jQuery、HTML5+、MUI等語(yǔ)法的提示功能，同時(shí)包含很多快捷鍵，讓前端開(kāi)發(fā)更加便捷。

訪(fǎng)問(wèn)HBuilder官方網(wǎng)站(http://www.dcloud.io),下載最新版的HBuilder,如下圖所示。

在圖上圖中單擊“下載”按鈕，會(huì)出現(xiàn)下載提示框，如下所示。

在圖片中可以看到HBuilder的當(dāng)前版本、歷史版本以及各平臺(tái)的不同版本，讀者在下載時(shí)根據(jù)自己的設(shè)備選擇適合的版本即可。

HBuilder下載完成，解壓到指定的路徑后，雙擊啟動(dòng)文件HBuilder.exe,會(huì)出現(xiàn)一個(gè)啟動(dòng)頁(yè)面，完成用戶(hù)注冊(cè)并登錄后，便可開(kāi)始使用HBuilder。HBuilder開(kāi)發(fā)界面如圖所示。

在上圖中，左側(cè)項(xiàng)目管理器中會(huì)出現(xiàn)一個(gè)名稱(chēng)為HelloHBuilder的示例項(xiàng)目，右側(cè)會(huì)出現(xiàn)一個(gè)HBuilder入門(mén)的窗口，該窗口中顯示的內(nèi)容是HBuilder官方的使用教程，提供了HBuilder的詳細(xì)使用方法。

下面以新建項(xiàng)目、新建文件以及運(yùn)行文件為例簡(jiǎn)單講解HBuilder的使用。

首先，在C盤(pán)下創(chuàng)建jQuery目錄用于保存項(xiàng)目文件。然后選擇“文件”一“新建”→“Web項(xiàng)目”命令，打開(kāi)“創(chuàng)建Web項(xiàng)目”對(duì)話(huà)框，如下所示。

在上圖中，填寫(xiě)項(xiàng)目名稱(chēng)(如chapter01ln,選擇項(xiàng)目的保存位置(如C：\jQuery)，單擊“完成”按鈕創(chuàng)建Web項(xiàng)目。

最后，編寫(xiě)項(xiàng)目中默認(rèn)的文件index.html,利用HBuilder提供的工具完成文件的運(yùn)行，頁(yè)面效果如下。

在上圖中，單擊方框內(nèi)的圖標(biāo)，即可在瀏覽器運(yùn)行此文件，頁(yè)面效果如下所示。

HBuilder中有很多快捷鍵，開(kāi)發(fā)者使用這些快捷鍵，可以更加高效地工作。HBuilder常用快捷鍵如表所示。

HBuilder 常用快捷鍵