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

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

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

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

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

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

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

下面以新建項目、新建文件以及運行文件為例簡單講解HBuilder的使用。

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

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

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

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

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

HBuilder 常用快捷鍵