HBuilder的安装与试用

文章记录了作者在学习前端框架Layui时,选择使用HBuilderX作为开发工具的过程。HBuilderX是DCloud推出的Web开发IDE,以其快速和高效著称。作者下载并安装了HBuilderX的Windows版本,通过创建HTML文件和运行示例程序展示了其基本用法。
摘要由CSDN通过智能技术生成

  准备把前端框架Layui仔细学习一遍(虽然Layui已经过了最流行的时候,但是很多项目都在用它),在B站找了一套《Layui框架精讲全套视频教程》,视频作者实操Layui时用的工具很方便,从弹幕中看到说用的是HBuilder,学习Layui过程中也想用用,本文记录下载、安装、试用HBuilder的过程。
  HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE,快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率(本段摘自百度百科)。

  HBuilder官网见参考文献2,最新的版本为HBuilderX,版本号为3.6.18,主要支持Windows和MacOS操作系统,分为正式版和Alpha版(Windows正式版下载地址见参考文献3,压缩包只有40几M,要比VS等IDE小得多)。
在这里插入图片描述
  HBuilderX在Windows平台中为绿色免安装版本,直接下载zip文件后,解压后即可使用。刚打开HBuilderX时程序界面如下图所示。
在这里插入图片描述
  而Layui教程中的界面如下图所示。
在这里插入图片描述
  上图左侧为项目管理器,按Alt+Q或者在视图菜单中点击“显示项目管理器等左侧视图”即可显示。同时在文件菜单中点击“打开目录…”,选中项目所在目录,即可在项目管理器中显示所有项目,如下图所示:
在这里插入图片描述
  在项目管理器空白处或文件夹上点右键,选择新建->html文件,即可创建html文件,本文仅为了测试HBuilderX的基本用法,因此直接在first.html中将Layui教程中的HelloWorld示例程序复制了一份。
在这里插入图片描述
  点击工具栏中的“浏览器运行”按钮(或者直接按Ctrl+R),在下拉框中选择Chrome浏览器浏览当前页面,然后HBuilderX会调用Chrome打开当前页面显示页面内容。
在这里插入图片描述
在这里插入图片描述

  后续会跟随Layui的教程继续学习HBuilderX的用法

参考文献:
[1]https://blog.csdn.net/weixin_54217081/article/details/122781088
[2]https://www.dcloud.io/
[3]https://download1.dcloud.net.cn/download/HBuilderX.3.6.18.20230117.zip

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值