HBuilderX安装使用方法

HBuilderX是HBuilder的升级版。它是是DCloud(数字天堂)推出为前端开发者服务的通用IDE,或者称为编辑器。HBuilderX的功能从下图可以直观的了解个大概:

img

官网地址:

https://ask.dcloud.net.cn

下载

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

img

说明: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可执行程序,双击即可启动程序:

img

也可以创建桌面快捷方式添加到桌面

在这里插入图片描述

简单使用

使用 “文件”菜单→“新建”→“html文件”, 可以新建一个html文件,如下图:

img

现在,可以编辑网页了,参见下图:

img

【“视图”菜单可以控制显示布局。】

当编辑完成后,点击“保存“按钮,就可以点击右侧的”预览“按钮看效果(若是第一次使用,需要下载浏览器插件)。参见下图:

img

在这里插入图片描述
在这里插入图片描述

如果显示没有内置浏览器安装这个两个插件

在这里插入图片描述

提示:输入关键字时,具有智能提示列表,可以加快输入速度,参见下图:

img

也可以用上下键移动到需要的条目 再用Ctrl+回车确定。

安装插件

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

在这里插入图片描述
img](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20191011/7d6fb1a6970578ae512bf8e604eee3a0.png)

7. 文件单击与文件双击

img

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐