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. 点击链接进入网站

如下界面:

2. 进入Hbuilder官方网站

如下界面:

3. 下载HBuilder

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

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

4. 解压安装包

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

5. 找到执行文件

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

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

6. 打开HBuilder

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

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

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

二、HBuilder IDE的使用

1. 打开HBuilder

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

2. 登录HBuilder

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

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

3. 详细了解HBuilder编辑器

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

· 准备工作

(1)新建项目

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

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

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

(2)新建HTML文件

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

        好啦,关于HBuilder IDE的下载与使用就简单的写这么多,想继续了解的可以在底下评论,我再更新博客!如果对你有帮助,可以点赞收藏哦!

`柠七
关注 关注
  • 132
    点赞
  • 675
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 24
    评论
HBuilder安装包
04-08
HBuilder8.8.0安装包,html,css,js,有很好的封装,自动提示全面
HBuilder.zip
07-01
此HBbilder版本不是最新版本,但也不是很老的版本,我练习前端比较常用的是这个。需要的小伙伴千万不要放过呀。
微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录
最新发布
m0_55004058的博客
05-10 421
因为前端写的是一次性将code与用户信息全传过来,用户点击登陆后会跳转到授权页面,用户若点击拒绝那么用户信息将不会传过来,只有code,这时我的处理逻辑是判断有无用户信息,若没有不存如数据库,这里由于用户点击授权会有时间响应所以做了一个短暂的休眠处理。创建登陆页面主要代码login.vue,主要是调用微信提供的api获取用户的code,这在前端同时还获取了用户的基本信息发送给后端。下载后在网页注册,进行实名认证,申请免费隧道,会生成隧道信息,启动natapp,创建springboot项目,添加依赖。
Hbuilder下载
10-29
HBuilder 是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。
HBuilder】的下载和安装
weixin_47375144的博客
03-13 3467
选中“HBuilderX.exe”,鼠标右键,创建快捷方式,将新生成的执行文件剪切到桌面(此步骤可有可无,我是为了方便之后的操作)进入解压的文件夹,找到执行文件“HBuilderX.exe”导入已有项目(文件-导入-从本地目录导入)双击打开桌面的执行文件。解压上述下载的安装包。
HBuilder下载和安装【图文教程】
zy1992As的博客
06-21 1107
在上图中,左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目,右侧会出现一个HBuilder入门的窗口,该窗口中显示的内容是HBuilder官方的使用教程,提供了HBuilder的详细使用方法。HBuilder下载完成,解压到指定的路径后,双击启动文件HBuilder.exe,会出现一个启动页面,完成用户注册并登录后,便可开始使用HBuilderHBuilder开发界面如图所示。最后,编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行,页面效果如下。
HBuilderX
杨葱儿
04-19 1万+
官方下载地址:http://www.dcloud.io/hbuilderx.html uni-app:https://uniapp.dcloud.io/quickstart uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 注意:在运行成小程序的时候,要在小程序开发者工具中设置:设置-安全设置-...
HBuilder X的下载使用(详细步骤)
qq_64505257的博客
12-14 4万+
HBuilderX支持HTML5的Web开发IDEHBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDEHBuilderX的编写用到了Java、C、Web和Ruby。HBuilderX本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
下载和安装 HBuilder X
.
07-17 1万+
如果您从其他来源下载 HBuilder X,请确保下载的文件来源可信,并且进行了适当的安全检查。1. 打开浏览器,访问 HBuilder X 的官方网站:https://www.dcloud.io/hbuilderx.html。5. 完成安装后,您可以在开始菜单或应用程序列表中找到 HBuilder X 的快捷方式,双击打开它。3. 下载完成后,找到下载的安装文件(通常是一个可执行文件),双击运行该文件。6. 第一次运行时,您可能需要设置一些初始配置,如选择语言、设置主题等。
HBuilderX从入门到发布教程
热门推荐
romulusla01的博客
09-20 6万+
一、环境安装和配置 1、下载HBuilderX工具 https://www.dcloud.io/hbuilderx.html 解压后打开开发工具 下载插件,打开工具-》插件安装 2、下载微信小程序ide工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 安装微信小程序开发工具,这里有个坑,我们系...
Hbuilder 下载与安装教程
梁辰兴的博客
03-08 1万+
Builder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDEHBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
HBuilder工具下载下载
06-24
HBuilder工具下载下载
开发软件HBuider
04-08
一款最简单的适合前端开发的工具,简洁好用。。。。。。。。。。。。。。。。。。。。。。。。。。。。
HBuilder X打包苹果操作步骤
02-27
HBuilder X打包苹果操作步骤 出现的注要问题: 当打包过程中出现如下问题: Appid: UNIDC267CE Command line invocation: /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild archive -sdk iphoneos...
Hbuilder项目Android Studio本地打包详细步骤
08-30
Hbuilder项目Android Studio本地打包详细步骤,包含官网地址,步骤、截图、注意事项
阿里/腾讯直播HBuilderX集成uniapp原生插件步骤
10-12
阿里/腾讯直播HBuilderX集成uniapp原生插件步骤 亲测可用 阿里/腾讯直播HBuilderX集成uniapp原生插件步骤
HBuilder打包Web网址
05-25
在本文中,我们将详细介绍如何使用HBuilder将Web网址打包成移动应用程序。 新建移动App项目 要开始打包Web网址,首先需要新建一个移动App项目。在HBuilder中,可以通过点击“文件”菜单下的“新建项目”选项来创建...
vue项目用HBuilder打包APP.docx
09-09
详细介绍vue项目用HBuilder打包APP的步骤,以及安卓手机两次退出的解决方法,并且判断主页面提示两次退出程序,子页面不提示
Hbuilder安装及使用教程
qq_45554909的博客
05-17 1万+
1.搜Hbuilder官网下载 官网:https://www.dcloud.io/index.html 下载地址:https://www.dcloud.io/hbuilderx.html 打开解压后的文件夹,找到一个叫做“Hbuilder.exe”的可执行文件,这个可执行文件就是Hbuilder的启动文件。 双击打开 2.使用 进入我们的项目建立阶段,点击“新建项目”,创建项目名称,设置项目所在的位置确定即可,完成之后会在左边的项目栏管理器中出现。 # 3.运行 ...
vue项目使用Hbuilder打包成app,详细步骤
06-07
下面是使用 Hbuilder 将 Vue 项目打包成 app 的详细步骤: 1. 安装 Hbuilder 首先需要安装 Hbuilder,可以从官网下载并安装。 2. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目。在终端中运行以下命令: ``` vue create myapp ``` 其中,“myapp”是项目名称。 3. 构建 Vue 项目 在 Vue 项目的根目录中运行以下命令,构建项目: ``` npm run build ``` 这将生成一个“dist”目录,其中包含构建后的 Vue 应用程序的文件。 4. 导入项目 在 Hbuilder 中创建一个新项目。选择“新建项目”->“HTML5+移动应用”,然后选择“导入已有的 HTML5+工程”。 在“导入工程”对话框中,选择“选择本地目录”,然后选择 Vue 项目的“dist”目录。 5. 配置应用程序 在 Hbuilder 中,打开“manifest.json”文件,配置应用程序的名称、ID、版本号等信息。 6. 添加插件 要访问设备功能和硬件,需要通过 Hbuilder 插件来实现。可以使用插件管理器来查找和安装需要的插件。 例如,要在应用程序中使用相机,可以执行以下步骤: - 打开“插件管理器”。 - 选择“搜索”选项卡。 - 搜索“camera”。 - 选择“安装”按钮。 这将安装相机插件。 7. 构建应用程序 在 Hbuilder 中,选择“运行”->“运行到手机或模拟器”,然后选择要运行应用程序的设备。 Hbuilder使用已安装的插件和配置文件构建应用程序,并将其安装到设备上。 这是使用 Hbuilder 将 Vue 项目打包成 app 的基本步骤。可以使用类似的步骤将其打包为 iOS 应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • HBuilder的下载与使用(详细步骤) 161438
  • Win 10系统截图的7种方式【简单实用】 90809
  • 如何使用记事本编译并运行Java源代码 31106
  • 重装Win10系统之U盘启动盘的制作(详细教程) 15414
  • Python和PyCharm的下载和安装(详细教程) 15318

分类专栏

  • 期末复习 4篇
  • 1+X 9篇

最新评论

  • 编译原理期末复习题(选择)

    m0_67742661: 请问第七题是不是选D啊

  • 编译原理期末复习题(判断)

    &df: 2是错误的

  • 编译原理期末复习题(判断)

    SamWangSDU: 18应该是错的,19应该是对的

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

    2301_77245773: 谁有老版本mac的hbuider哪个大佬能给个谢谢啦

  • 如何使用记事本编译并运行Java源代码

    `柠七: 添加完一定要记得点击确定,不然添加不上,还是会出问题。 打开cmd,输入javac如果还显示’javac’ 不是内部或外部命令,请关掉cmd重启一下就好了

您愿意向朋友推荐“博客详情页”吗?

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • Linux操作系统练习题
  • Windows操作系统基础练习题
  • 网络安全法律法规练习题
2023年1篇
2022年31篇

目录

目录

评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

`柠七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

哆哆女性网推测的近义词公司起名在哪可以查银行活期存款利息起游戏名字大全英文起名网免费6新生儿起名无极魔道农业公司起名大全2021最新版的adc年龄确认已满18岁葵花属猪宝宝起名宜用字大全男天年生物温如松新公司起名二字大全集玫瑰爱人起名称测试打分女孩美丽的童话萧澈夏倾月小说全文免费阅读云南起义将领名单竞价排名村居古诗我是你额上熏黑的矿灯污垢神行太保假日暖洋洋剧情介绍傅姓起名字啊钟爱姉summer八字起名法给男孩起名的古诗句九阴真经无根门淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化