HBuilderX安裝使用教程

HBuilderX是HBuilder的升級版。它是是DCloud（數字天堂）推出為前端開發者服務的通用IDE，或者稱為編輯器。HBuilderX的功能從下圖可以直觀的了解個大概：

?

官網地址：

https://ask.dcloud.net.cn

下載

https://www.dcloud.io/hbuilderx.html

?

說明：HBuilderX正式版和Alpha版區別：

Alpha版比正式版更新頻率更高，新功能會優先在 alpha 版上發布，但穩定性可能不如正式版，對于新手建議用正式版。

HBuilderX標準版和App版的區別

BuilderX標準版可直接用于web開發、markdown、字處理場景。當用來做App開發時需要安裝插件。App開發版預置了App/uni-app開發所需的插件，開箱即用。標準版也可以在插件安裝界面安裝App開發所需插件，App開發版預集成App開發所需插件。App開發插件體積大的原因主要有2方面：真機運行基座，Android版、iOS版、iOS模擬器版，加起來體積就1百多M。真機運行基座需要把所有模塊都內置進去，方便大家開發調試。開發者自己做app打包是不會這么大的，因為可以在manifest里選模塊來控制體積。uni-app的編譯器，依賴webpack和各種node模塊，node_modules就是這么一個生態現狀，文件超級多，幾萬個文件，解壓起來很慢

?

下載后，將壓縮包復制到適當位置，解壓壓縮包，找到Hbuilder X可執行程序，雙擊即可啟動程序：

?

簡單使用

使用 “文件”菜單→“新建”→“html文件”， 可以新建一個html文件，如下圖：

?

現在，可以編輯網頁了，參見下圖：

?

【“視圖”菜單可以控制顯示布局。】

?

當編輯完成后，點擊“保存“按鈕，就可以點擊右側的”預覽“按鈕看效果（若是第一次使用，若是后第一次使用”預覽“，提示安裝內置瀏覽器插件，安裝之），參見下圖：

?

?

提示：輸入關鍵字時，具有智能提示列表，可以加快輸入速度，參見下圖：

?

也可以用上下鍵移動到需要的條目 再用Ctrl+回車確定。

?

?

?

總結

以上是生活随笔為你收集整理的HBuilderX安装使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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