HBuilderX安装使用教程

HBuilderX安装使用教程

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

 

官网地址：

https://ask.dcloud.net.cn

下载

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

 

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

 

简单使用

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

 

现在，可以编辑网页了，参见下图：

 

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

 

当编辑完成后，点击“保存“按钮，就可以点击右侧的”预览“按钮看效果（若是第一次使用，若是后第一次使用”预览“，提示安装内置浏览器插件，安装之），参见下图：

 

 

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

 

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