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 BI
GitHub:GitHub简介、使用方法、经验总结(图文教程)之详细攻略(持续更新!)
GitHub:GitHub简介、使用方法、经验总结(图文教程)之详细攻略(持续更新!)
|
6月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
6月前
|
IDE Java 应用服务中间件
第一章:入门、安装、配置
第一章:入门、安装、配置
|
6月前
|
消息中间件 运维 关系型数据库
KnowStreaming系列教程第一篇——安装和使用
KnowStreaming系列教程第一篇——安装和使用
430 0
|
6月前
|
移动开发 前端开发 IDE
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
205 0
|
11月前
|
小程序 JavaScript 前端开发
小程序之如何学习一个新的知识,首先就是通过官网进行讲解!!(2)
小程序之如何学习一个新的知识,首先就是通过官网进行讲解!!(2)
SketchUp2020免费中文完整版官网2021教程模型库下载
SketchUp2022 WIN10 64位安装步骤: 1.先使用“百度网盘客户端”下载SU22_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,然后找到SketchUpProFull-2022.exe,鼠标右击选择【以管理员身份运行】 2.选择软件安装路径,默认安装在C盘,点击【更改】可修改软件安装路径,注意:安装路径文件夹名称不能含有中文字符!小编这里将软件安装在D盘SU2022文件夹下,然后点击【安装】 温馨提示:请记住软件安装路径,后续操作需要用到。 3.正在安装中,这个过程中大概需要10分钟左右的时间,请耐心等待… 4.安装结束,点击【完成】 5.返回软件初始安装包
SketchUp2020免费中文完整版官网2021教程模型库下载
|
iOS开发 MacOS
XMind 2022 使用教程
XMind 2022的安装 XMind 2022的使用 XMind 最新版 思维导图的安装使用 思维导图 XMind 2022的下载 XMind 2022 XMind 2022 Win/Mac 强大的思维导图软件
XMind 2022 使用教程
|
iOS开发 MacOS
PopClip使用教程图文详解
无论是在win还是在Mac上面复制粘贴文字搜索等等都是通过快捷键等操作的,一直以来都已经成为了习惯。但是PopClip的出现彻底的颠覆了我的想法,这个绝对是Mac平台上面的神器,必备软件有了它,你在操作文字时候基本上可以跟快捷键告别了,并且可以按需安装扩展应用。
PopClip使用教程图文详解
|
缓存 Kubernetes 网络协议
k8s安装笔记
k8s安装笔记
k8s安装笔记
下一篇
无影云桌面