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的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：

雅黑主题：

雅蓝主题：

好了本节全部内容全部结束了，希望我准备的内容对你有所帮助

你的支持是我的最大动力，若觉得我的教程还可以或对你有帮助为我点赞加关注！谢谢！