HBuilder的下载与使用(详细步骤)

这篇具有很好参考价值的文章主要介绍了HBuilder的下载与使用(详细步骤)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、HBuilder IDE的下载

HBuilder下载官网地址:

在地址栏中直接输入https://www.dcloud.io

或者直接点击下面的链接

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

进入官网,免费下载最新版的HBuilder。

HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

1. 点击链接进入网站

如下界面:

hbuilder官网,ide

2. 进入Hbuilder官方网站

如下界面:

hbuilder官网,ide

3. 下载HBuilder

        找到下载按钮【DOWNLOAD】,点击后会出现一个弹窗,根据电脑版本进行选择,点击完成之后便开始进行下载然后进入等待即可。新一代的版本为HBuilder X,上一代的版本为HBuilder。hbuilder官网,ide

        我这里下载的是上一代HBuilder win(258.6M),点击后跳转至如下界面,点击【普通下载】,即可开始免费下载

hbuilder官网,ide

4. 解压安装包

下载完成后,可以将压缩包放在合适的位置再进行解压,便于今后查找、管理

hbuilder官网,ide

hbuilder官网,ide

5. 找到执行文件

        打开解压后的文件夹,找到一个叫做“HBuilder.exe”的可执行文件,这个可执行文件就是HBuilder的启动文件。即下图选中的文件:

hbuilder官网,ide

 HBuilder不用安装解压完成即可使用。

6. 打开HBuilder

        双击这个文件就可以打开HBuilder这个开发编辑器了,因为我们是直接解压使用的。所以找起来会很麻烦,你可以将【HBuilder.exe】这个执行文件发送到桌面快捷方式,这样每次使用的时候直接在桌面就可以打开。如下图所示:

hbuilder官网,ide

不会创建桌面快捷方式的宝宝看过来:

右击【HBuilder.exe】这个执行文件,选择【创建快捷方式】,就会在刚刚的文件下出现一个快捷方式,选中后拖到桌面上就行啦!如下图:

hbuilder官网,ide

二、HBuilder IDE的使用

1. 打开HBuilder

双击快捷方式或【HBuilder.exe】这个执行文件,会出现如下界面:

hbuilder官网,ide

2. 登录HBuilder

有账号的直接输入用户名和密码进行登录,没有账号的点击注册用户

hbuilder官网,ide

        输入用户名和密码后登录即可 

3. 详细了解HBuilder编辑器

        打开之后,你会发现HBuilder的编辑器风格是黄色系,对眼睛比较好,不同于其他编辑器以黑白为主。而且它非常人性化,给你很多的新手入门提示,大家可以详细看看,对这个软件也会有一个全面系统的认识。

· 准备工作

(1)新建项目

        新建一个Web项目,依次点击【文件】【新建】选择【Web项目】

        或者按下Ctrl+N,选择【Web项目】快速新建

hbuilder官网,ide

hbuilder官网,ide

        如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)  

(2)新建HTML文件

        在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图:

hbuilder官网,ide

        好啦,关于HBuilder IDE的下载与使用就简单的写这么多,想继续了解的可以在底下评论,我再更新博客!如果对你有帮助,可以点赞收藏哦!文章来源地址https://www.toymoban.com/news/detail-813895.html

到了这里,关于HBuilder的下载与使用(详细步骤)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用HBuilder运行钉钉小程序

    1,创建package.json文件夹,添加以下代码 2,点击运行按钮,就可以打开了 , 查看控制台,在小程序开发者工具中进行要导入的路径  

    2024年02月16日
    浏览(69)
  • 使用 HBuilder X 将微信 小程序 项目 打包

    提示:这里简述项目相关背景: 使用 HBuilder X 将微信 小程序 项目 打包 这里描述项目中遇到的问题:` 使用 HBuilder X 将微信 小程序 项目 打包 这里填写该问题的具体解决方案: 第一步:使用 HBuilder X 将项目 打开、 第二步: 将 微信小程序项目 进行 打包 第三步:一般在打包

    2024年02月16日
    浏览(42)
  • HBuilder X中uView UI框架的安装及使用

    开发工具: HBuilder X 在最上方的工具中点击 插件安装 —— 安装新插件 —— 前往插件市场安装  在作者排行榜中找到 uView UI 选择该版本 然后点击下载并导入HBuilder X  然后选择你想导入的项目 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vue 之

    2024年01月18日
    浏览(32)
  • 官网下载IDE插件并导入IDE

    地址:https://plugins.jetbrains.com/plugin/21068-codearts-snap/versions 说明:本次演示以IDEA软件为例 操作: 等待下载完成 点击File-setting-Plugins 导入插件 找到刚刚下载的插件选择导入 导入成功 IDE软件不对应就会出现下列错误,等待后续插件更新再使用或者,降低IDE版本

    2024年04月15日
    浏览(45)
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序

    选择uni-app的原因是什么 需要使用到的工具 关于HBuilder X工具和微信小程序工具的介绍  怎么下载HBuilder X工具和微信小程序工具  如何使用HBuilderX工具 如何使用微信小程序工具  结尾 什么是uni-app uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到

    2024年02月08日
    浏览(69)
  • 微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录

    测试账号申请 测号响应流程:客户端发送请求,微信服务器收到请求后,转发到开发者服务器上,处理完后在发送给微信服务器,在返回给客户端 1、打开微信公众平台,点击测试帐号申请。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login, 通过微信扫一扫授权就能进

    2024年02月02日
    浏览(61)
  • HBuilder-爱心小动画

    代码如下: 效果如下: 持续性的动画 

    2024年02月08日
    浏览(32)
  • 用hbuilder写一个登录页面

    在 HBuilder 中创建一个登录页面需要以下步骤: 新建项目: 点击 HBuilder 主界面的 \\\"新建项目\\\" 按钮,选择 \\\"空项目\\\" 模板。 创建 HTML 页面: 右键项目文件夹,选择 \\\"新建\\\" \\\"HTML 页面\\\",命名为 \\\"login.html\\\"。 编写 HTML 代码: 在 \\\"login.html\\\" 文件中,编写 HTML 代码以创建登录表单。例如:

    2024年01月25日
    浏览(26)
  • HBuilder发行微信小程序

    首先需要完善mainifest.json中的基本配置 这个需要组测dcloud才可以获取,注册后点击重新获取就可以。 然后发行前还需要完成dcloud的信息,这个他会给你网址 点击连接完成信息填写就可以了 然后就可以发行了。 发行成功后会自动跳转微信小程序,并且预览按钮可以点击了。

    2024年03月14日
    浏览(55)
  • HBuilder的安装及配置路径(最全)

    目录 一、HBuilder的下载与安装 1. HBuilder官网 2. 选择所需版本 3. 下好后,进行解压。 4. 启动Hbuilder 二、配置文件运行路径 1.配置微信小程序文件路径 2.配置Firefox浏览器文件路径(其他雷同) 1. HBuilder官网         HBuilder简介:它是为前端开发者服务的通用IDE,或者称为编

    2024年02月13日
    浏览(22)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包