hbuildercss加js加html的文件怎么运行

1、打开HBuilder，点击软件顶部的文件选项，在d出的选择中点击新建，选您要新建的文件JS，HTML，CSS等可以进行选择。

2、输入完成后将文件进行保存，可使用Ctrl+s键保存文件，或点击红框标注出的位置也可保存文件。

3、保存完成后点击HBuilder软件菜单栏的运行选项，点击运行到浏览器选项，选择自己要运行的浏览器即可。

4、最后在选择的浏览器中出现运行的结果即可。

一、开始设置

1

A、显示“控制台”视图

Mac版默认隐藏控制台（应该是有事情触发才会显示，比如报错的时候），所以我们先把“控制台”视图显示出来。

步骤（点击菜单栏 *** 作）：

1. 视图——>显示视图——>其他；

2. 常规——>控制台

这样“控制台”就显示出来了。

这一步的目的是为了便于终端的 *** 作和显示，在“控制台”里输入命令和显示运行结果。

HBuilder Mac版怎么设置内置终端(terminal)

HBuilder Mac版怎么设置内置终端(terminal)

2

B、添加终端

现在我们开始设置终端。

步骤：

1. 运行——>外部工具——>外部工具 配置

2. 新建(+)

3. 会d出一个d窗以供设置，要填的地方已经标出。

HBuilder Mac版怎么设置内置终端(terminal)

HBuilder Mac版怎么设置内置终端(terminal)

HBuilder Mac版怎么设置内置终端(terminal)

3

C 、 终端的设置配置

a. 【名称】 那里填给新建工具起名字。

我这里命名为：OpenTerminal

b. 【要执行的命令或文件】那里输入：/bin/bash ，这是固定（没有意外的话都是这样子的，webstorm的终端路径也是这个）的，

c. 【工作目录】那里可以通过【变量】按钮进行选择，我们选择project_loc变量，表示：项目文件夹的绝对路径。选择之后框会自动生成：${project_loc}

如果你懒得找，可以直接把 ${project_loc} 写进去。

d. 点击【公共】进行进一步配置，主要就是“编码”，“输入和输出”，“在后台启动”几项。一般会默认的。不过出现乱码等情况再进行修改，配置可以参考我设置（如图，第二张）。

e. 最后点击【应用】完成设置。

HBuilder Mac版怎么设置内置终端(terminal)

END

二、运行测试

运行测试

设置完成了，现在我们来运行测试下。

步骤：

1. 点击选中你想运行终端的项目文件夹。

2. 运行——>外部工具——>OpenTerminal（选择你刚建的那个工具名称，我的是OpenTerminal）

3. 这会儿，“控制台”会有变化（虽然一片空白——这就是我说的体验差的原因，不过已经可以输入命令了，正常情况下默认的控制台空白处是不能输入字符的）。

4. 我们输入命令：help 试试，记得输完按回车（enter）键。

5. 不出意外的话，就能看到输出结果了。

（看图）

到这里的设置结束了，终端在构建、编译前端项目的时候还是很有用的，只是HBuilder主要针对的是前端HTML、CSS、JS文件的编辑，并不侧重于项目的构建编译，所以对终端的依赖并不是刚需，但如果你的项目是使用基于node的gulp、grunt、webpack等工具构建，那么终端是必须的。

如果碰到问题欢迎留言讨论。

最后的一点讨论，也许对你很有用：

【工作目录】的设置（前面提到的${project_loc}）是个按需配置的项，我那样选择也是考虑到一般习惯上都是新建一个项目然后开始工作的，也就是一切都是在项目目录下进行，所以就选了${project_loc}变量。如果你有自己的需求，可以另外配置，多试试就知道怎么用了，毕竟各个变量也有说明，理解起来也不难。

---