HBuilderX初级安装使用教程

1. 安装HBuilderX

HBuilderX官网下载地址https://www.dcloud.io/hbuilderx.html

打开网站后，点击Download按钮，弹窗如下：

• App开发版，包含大部分App开发插件。App开发，指的是手机应用开发。
• 如果您是初学者或开发前端，建议下载 标准版 。后期如果学习App开发，可以到【插件安装】中，安装相关插件

1. Windows版本，下载的是一个 zip包，需要解压后才能使用。解压软件可以使用：360压缩软件、或7zip压缩软件

2. 压缩过程，不要中断。不要在压缩软件中打开exe。

3. 解压完成后，点击HBuilderX.exe ，如下图

注意：如果您无法打开或启动报错，请参考此贴 windows启动问题排查

2. 初识HBuilderX

HBuilderX首次启动后，打开了一个HBuilderX自述文件.md, 如下图：

HBuilderX自述文件.md： 是一个markdown文件，什么是markdown呢？就是个文本语言。 有兴趣的同学，点此了解Markdown

有兴趣的同学，可以读一读这个文件。或者直接点击右上角的x，关闭此文件。

关闭后的页面窗口如下：

3. 创建项目，开始HX旅程

点击【新建项目】、或点击工具栏上第一个图标（就是带有红色+号）、或直接 Ctrl + N ，调出创建项目窗口

新建项目后，如下图：

4. 编写代码

如上图所示，HBuilderX拥有强大的代码助手提示，可以帮您少敲很多代码。

5. 查看代码效果

如下图所示，点击【预览】可以查看代码效果。

如果您首次点击【预览】，又没有安装【内置浏览器】，点击预览的时候，会提示您安装插件，点击确定即可。

6. 安装插件

点击菜单【工具】【插件安装】

7. 文件单击与文件双击

如上图，标红部分，显示效果不一样。

这是因为：单击预览文件，双击打开文件