HBuilderX 最新安装使用教程,附详细图解,持续更新

简介: HBuilderX 最新安装使用教程,附详细图解,持续更新

HBuilderX 安装使用教程


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


10c4458c7dbad5ffa148bdae84ca782f_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


官网地址:


https://ask.dcloud.net.cn

点击下载

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


b859fa87dcbbb7bf34371e40e6881ac0_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


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


4016f4104946558e186726c1a85b9627_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


简单使用


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


04ef1ac8b5f59e8cc19f7d5f2e67d5a5_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


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


24af814afce3ac2bf8c0de4e72696ae3_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


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


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


7d961f0e413ae193f7ec05d8e9de67e0_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


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


031d1bd5aff200d599a221319421063b_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70.png


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


下载地址


点击下载


相关文章
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
4134 1
|
小程序 开发工具 开发者
微信开发者工具使用教程
微信开发者工具使用教程
|
消息中间件 存储 运维
浅析阿里《云原生架构白皮书》
提前看了《云原生架构白皮书》一直想着要写点东西,拖延来去[《白皮书》](https://developer.aliyun.com/topic/cn-architecture-paper)已经正式发布2天了,我还迟迟没有动手。没动手的一方面原因是我的懒癌症又犯了;另一个原因是《白皮书》覆盖面之广,基本触及到云原生的方方面面,而我在云原生方面的知识储备不足以支撑我写出一篇好文。
6511 0
浅析阿里《云原生架构白皮书》
|
网络安全 数据库
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
本文演示了三种网站的搭建,分别是:博客、论坛、个人作品。从域名选择,到阿里云服务器的购买,到最后的网站搭建。
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
|
消息中间件 安全 API
记项目的一次发送短信及短信模板配置分享
我们日常使用的软件或者网站,大部分都在使用短信业务,比如 注册 、 验证码功能 。还有一些特定的业务需要发送短信通知国内外用户等。有了需求就会有平台提供服务,国内有很多互联网公司都提供短信业务,比如阿里云、腾讯云、七牛。本次我们主要讲解的是阿里云提供的短信服务。
记项目的一次发送短信及短信模板配置分享
|
移动开发 小程序 数据可视化
HBuilderX 小白上手指南
HBuilderX 小白上手指南
1644 0
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
24692 14
|
NoSQL 前端开发 Redis
Windows 下安装和配置 Redis (图文教程)
Windows 下安装和配置 Redis (图文教程)
|
Java 数据库连接 Maven
IDEA创建SpringBoot的多模块项目教程
IDEA创建SpringBoot的多模块项目教程
1440 0
|
前端开发
[巨详细]安装HBuilder-X教程
【6月更文挑战第6天】下载HBuilder-X 官方网址:https://www.dcloud.io/ 点击网址 ,打开官网
2980 1