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

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

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

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

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

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

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

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

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

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

在上圖中，單擊方框內的圖標，即可在瀏覽器運行此文件，頁面效果如下所示。

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

HBuilder 常用快捷鍵

言

HBuilderX，DCloud推出的一款HTML5的Web開發工具，軟件體積小，啟動快。

uni-app，一個使用Vue.js開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序、快應用等多個平臺。

準備IDE HBuilderX，下載地址：https://www.dcloud.io/hbuilderx.html，當前的使用的版本是：HBuilder X 3.5.3。

創建過程

1、菜單：文件->新建->項目

2、填寫項目名稱及存儲路徑，選擇對應的模板

3、修改項目文件：hello\pages\index.vue

<template>
	<view class="container">
		<view class="intro">HelloWorld~</view>
		<text class="intro">佚名今人</text>
	</view>
</template>

4、運行項目

注： 第一次運行會自動安裝插件~

5、預覽運行效果

tml開發環境搭建

有一個好的編輯器我們可以方便地的開發項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發環境。

基于html項目的開發和代碼編寫現在網上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統環境下開發和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規則編寫相關的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業的編輯器來開發項目，編寫代碼和管理項目。

常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網下載地址：

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

vs code的官網下載地址：

https://code.visualstudio.com/

Sublime Text官網下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。

一，下載

首先訪問HBuilderX的官網網址：

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

打開上面的HBuilderX下載網址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環境下下載后的文件是一個壓縮的.zip文件。

二，安裝

鼠標右擊下載下來的壓縮文件進行解壓。

解壓完成后是一個名為HBuilderX的文件夾。

解壓完成后鼠標雙擊HBuilderX文件夾：

雙擊運行名為HBuilderX.exe的應用程序文件即可啟動HBuilderX編輯器：

因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項目

HBuilderX編輯器初次啟動時的默認界面是下圖所示：

按照下圖所示可以創建一個新的名為demo1空白項目：

名為demo1的空白項目創建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項目下創建名為helloworld的html文件

鼠標右擊創建的demo1項目選擇新建在選擇.html文件：

在彈出的對話框里填入html文件的名稱：

編寫一段代碼：

運行：

在瀏覽器上觀察效果：

好了，到這里html的開發環境搭建和HBuilderX的安裝教程結束了。

下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環境下做開發也是令人羨慕的一件事。

按照以下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：

雅黑主題：

雅藍主題：

好了本節全部內容全部結束了，希望我準備的內容對你有所幫助

你的支持是我的最大動力，若覺得我的教程還可以或對你有幫助為我點贊加關注！謝謝！