HBuilder X安装及常用配置

16 篇文章 2 订阅
订阅专栏

HBuilder X安装及常用配置

一、下载并安装

下载地址: https://www.dcloud.io/hbuilderx.html

在这里插入图片描述

在这里插入图片描述

下载完是一个压缩包,需要解压就直接使用,不需要安装。直接点击 HBuilderX.exe启动。

在这里插入图片描述

二、安装插件

2.1、安装插件

工具 -> 插件安装寻找到想要安装的插件直接点击安装就可以了。

在这里插入图片描述

在这里插入图片描述

2.2、常用的插件

  • uni-app APP调试

在APP端调试工具

  • git插件

使用git版本管理器是需要使用

  • htmlhint

html语法校验

  • stylelint

css、less、sass语法校验

  • scss/sass编辑

将scss编辑成css时使用

  • es6

编辑es6为js或者es5使用

其余的插件根据自己的需求安装就可以了。

三、git的使用

3.1、TortoiseGit安装

如果是苹果电脑可以参考官方文档: https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/35248

使用git需要依赖 TortoiseGit,首先需要下载 TortoiseGit

TortoiseGit下载地址: https://tortoisegit.org/download/

在这里插入图片描述

TortoiseGit安装就不用说了,一直点击下一步就可以了。需要注意的是安装地址记得修改为D盘或者其他盘符,不要安装在C盘。安装到最后会弹出一个框,类似于下面这个框,可以直接点击取消,接下来在讲解。

在这里插入图片描述

3.2、导入git项目并使用

文件 -> 导入 -> 从Git导入,输入git远程仓库地址,选择好保存目录后点击导入。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.3、Git相关操作

鼠标放在项目上右击,选择Git提交。会弹出一个框,大概意思是说我们并没有设置电子邮箱和用户名,需要设置才能进行操作。这个问题是我们在安装 TortoiseGit遗留下来的问题,当时弹出这个设置框的时候并没有设置,而是直接关闭的。这里就直接点击 “是”设置用户名和密码。输入相关信息之后,就可以操作了。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里会提示添加提交的描述,下面复选框中 Amend Last Commit必须选中,不选中是不能提交的。

在这里插入图片描述

在这里插入图片描述

如果现实这样就说明提交成功了

在这里插入图片描述

3.4、推荐操作

常规操作

完成拉取、提交、上传这些操作,你会发现在 Git同步这里会更加美观,一个界面就可以完成相关操作,点一下就可以。

在这里插入图片描述

查询日志

在这里插入图片描述

四、创建项目

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目:

img

选择uni-app,输入项目名称,选择保存路径,在选择项目模板,按回车开始创建。

如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

在这里插入图片描述

五、云打包

5.1、登录hbuilderX

云打包之前必须登录 hbuilderX,点击左下角“未登录”进行登录或者注册。

在这里插入图片描述

5.2、云打包

在打包之前需要做相关配置,这个配置有些多,需要仔细配置,都是图形化的。

双击打开manifest.json文件来配置App。

在这里插入图片描述

  • 基础配置

配置应用名称、应用描述和版本号。

在这里插入图片描述

  • APP图标配置

生成app安装后在手机桌面显示的图标,注意:这个图标只支持 .png格式的图片

在这里插入图片描述

  • App启动图配置

当在手机桌面点击App启动时显示的图片。

在这里插入图片描述

  • app模块权限配置

这里需要看自己的app需要用到手机的那些应用,进行相关配置。

在这里插入图片描述

其他的配置根据自己的需求配置就好,最后配置完成后,点击最下面的 “源码视图”查看配置情况,这就是以代码的形式显示了,如果没问题可以按 Ctrl+S保存一些。

在这里插入图片描述

开始打包

点击 发行 -> 原生APP-云打包

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

最后提示打包完成后会自动回到控制台页面,但是我这里提示邮箱没有认证,但是也可以打包的,但是打包后在你的云端没有该软件。注意:下载的这个地址为临时地址,只能下载5次。

在这里插入图片描述

根据提示的网址进去认证邮箱, https://dev.dcloud.net.cn/ 进入这个网址后,点击登录。根据 hbuilderX注册的邮箱登录进去,你之前打包过的所有APP都会在这里显示。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

六、运行

运行在浏览器中

运行 -> 运行到浏览器 ->Chrome 其中Chrome是我的Google浏览器,你也可以选择其他浏览器启动。

在这里插入图片描述

运行在模拟器中

在开发中运行在模拟器中是运用最多的操作了,首先启动本地的模拟器,稍等片刻。

在这里插入图片描述

在这里插入图片描述

注意:如果运行在手机上也是同样的操作,需要更加注意的是。运行在手机上必须打开手机的“开发者模式”,这个模式一般在手机的 设置 -> 其他设置 -> 开发这选项进来之后,会有一个 开发这选项,将这个打开 hbuilderX才可以识别到。

Uni-app运用HBuilderX和微信web开发者工具做微信小程序
m0_75260695的博客
06-14 6808
Uni-app的介绍:uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序、快应用等多个平台.HBuilderX中的H是HTML的首字母,Builder是构造者,X是HBuilder的下一代版本。简称HX。HX是轻如编辑器、强如IDE的合体版本。微信web开发者工具的介绍:为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了微信 web 开发者工具。
uni-app使用HBuilder X工具和微信小程序工具开发微信小程序
qq_64047601的博客
06-15 3031
uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5 以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝等)、快应用等多个平台。HBuilderX,H是HTML的首字母,Builder是构造者,X是HBuilder的下一代版本。我们也简称HX。HX是轻如编辑器、强如IDE的合体版本。HBuilder X工具的扩展性强HX支持java插件、nodejs插件,并兼容了很多vscode的插件及代码块。
HBuilder打包Web网址
05-25
HBuilder打包Web网址
使用Hbuilderx开发uni-app的时候没有package.json怎么安装依赖
最新发布
m0_74265954的博客
04-23 1030
大家好,我是文心一言的搬运工(哽咽)小白记录勿喷。
HbuilderX
weixin_30478923的博客
07-02 2545
HBuilderX入门教程 HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能,清爽的界面,强大的功能和于一身。 本文档面向入门用户,建议初学者仔细研读。 介绍 执着于更快一步的理念,hx的左侧项目管理器是单击响应而不是双击。 单击展开目录,单击预览文件,双击打开文件。 预览文件时顶部标签卡是斜体的,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替...
HbuilderX打包成apk安卓安装包并装到手机上
AN_NI_112的博客
05-27 1万+
HbuilderX打包成apk安卓安装包并装到手机上
Hbuilder创建uni-app项目配置依赖(node-modules)
热门推荐
IT_CRH的博客
03-24 2万+
Hbuilder创建uni-app项目,为项目配置依赖
HBuilderX安装.7z
07-16
这是一个编译器,HBuilderX安装包,装上即能使用,编译网页非常方便。
如何安装使用HBuilderX软件。
04-10
HBuilderx是一个前端开发常用的软件,本压缩包含有HBuilderX.3.1.9.20210413.full.dmg、HBuilderX.3.1.9.20210413.full.zip、2345好压.exe和Chrome_69.0.3497.100_x64.exe等软件,视频教程:...
【JavaScript源代码】node.js安装HbuilderX配置详解.docx
12-29
node.js安装HbuilderX配置详解  npm安装教程:  官网:https://nodejs.org/en/  webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli:...
HBuilderX.3.7.9.20230324 安装包,附安装使用教程
05-09
HBuilderX.3.7.9.20230324 安装包,附安装使用教程 HBuilderX是HBuilder的升级版。它是是DCloud(数字天堂)推出为前端开发者服务的通用IDE,或者称为编辑器。 BuilderX标准版可直接用于web开发、markdown、字处理...
HBuilder软件及HBuilderX软件
07-09
制作HTML、vue等前端页面,hbuilder工具是必不可少的,这里提供了绿版和红版的,供大家下载
HbuilderX前端开发工具的安装配置
qq_23257451的博客
08-25 1万+
学习uniapp,使用HbuilderX编译器来按照官网的文档学习是最快速的,所以配置好开发工具,学习起来事半功倍,下面主要记录工具安装、微信开发者工具配置,真机配置、安卓模拟器配置以及遇到的问题。......
HBuilderX安装+配置教程
Siobhan_Mxin的博客
09-08 4091
HBuilderX是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛! 进入官网后,我们可以看到HBuilder目前有两个版本,一个是windows版,一个是mac版。 使用HBuilder新建项目. 依次点击文件→新建→选择Web项目 (按下Ctrl+N,W可以触发快速新建 (MacOS请使用Command+N,然后左键点击Web项目)) 如上图
HBuilder】的下载和安装
weixin_47375144的博客
03-13 3429
选中“HBuilderX.exe”,鼠标右键,创建快捷方式,将新生成的执行文件剪切到桌面(此步骤可有可无,我是为了方便之后的操作)进入解压的文件夹,找到执行文件“HBuilderX.exe”导入已有项目(文件-导入-从本地目录导入)双击打开桌面的执行文件。解压上述下载的安装包。
HBuilder X怎么配置浏览器运行方法和小程序运行方法(uniapp)
lance_heart的博客
01-27 2451
HBuilder X是一款支持HTML5的Web开发工具,既可以将创建好的HTML文件运行在浏览器,还能够配置浏览器、小程序相关参数,下面就跟小编一起来了解下具体步骤吧。然后直接运行需要的浏览器就可以了。然后导入你本地的uniapp项目。
HBuilder X的下载与安装及Vue的安装与部署
weixin_44493195的博客
06-01 5861
HBuilder X的下载与安装 下载 Step1:打开HBuilder X下载的官网,地址http://www.dcloud.io/hbuilderx.html Step2: 进入下面的界面,点击DOWNLOAD 之后选择要下载的版本,这里选择Windows-开发版,因为标准版有些插件没有安装好。见下图: 然后开始下载,网速ok的话应该很快下载好了。 安装 找到下载好的压缩包->解压缩->找到HBuilder X.exe即可运行应用->创建桌面快捷方式 解压后找到HBuilder
记录【未配置appkey或配置错误】安卓开发uniapp的原生插件的步骤及避坑
一粒程序米
09-26 7377
安卓开发uniapp项目步骤 1.下载uni-app提供的Android离线SDK 下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android 下载完毕解压,将 \HBuilder-Integrate-AS 文件夹拷贝到一个干净文件夹里,以后我们就围绕这个文件夹开展工作。要求目录的路径没有中文哦,不然androidstudio会打不开。 2.Android Studio导入HBuilder-Integrate-AS 导入之后,删除uni
hbuilder x
12-01
HBuilder X是一个前端开发常用的集成开发环境(IDE),它支持多种前端开发语言和框架,如HTML、CSS、JavaScript、Vue.js、React等。HBuilder X提供了丰富的代码编辑、调试、构建和发布功能,可以帮助开发者更高效地进行前端开发。同时,HBuilder X也支持多平台开发,包括Windows、Mac和Linux等操作系统。如果你是前端开发人员,HBuilder X是一个非常不错的选择。

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

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

热门文章

  • mongodb查询大全mongo语句 51790
  • HBuilder X安装及常用配置 32750
  • io.seata.common.exception.FrameworkException: can not connect to services-server. 22535
  • Vue根据id在数组中取出数据 18645
  • minio安装和使用 15675

分类专栏

  • mongodb 9篇
  • docker 6篇
  • 其他 25篇
  • 前端 9篇
  • javaSE 11篇
  • 消息队列 1篇
  • 各种异常分析 5篇
  • 工具使用 16篇
  • 版本控制器 6篇
  • 服务器 4篇
  • 笔记
  • redis 3篇
  • Linux 10篇
  • spring家族 8篇
  • spring cloud alibaba 2篇
  • 对象存储 2篇
  • RocketMQ 3篇
  • 测试 2篇
  • 文件格式处理 1篇
  • 文档相关 1篇
  • java常用工具类 5篇
  • JWT 1篇
  • mysql 1篇
  • elk 3篇

最新评论

  • docker 部署 mongodb 集群【建议收藏】

    烟雨江南__: 有点懵表情包

  • word文档转为PDF以及多种文档格式转换

    北港孤梦: 博主,拉了你项目里面的aspose-pdf-18.9.jar和license.xml,放在了项目中,限制效果还在,水印和只能转四页。

  • 在Windows系统上搭建MongoDB-这篇文章刚刚好

    CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天值得看】榜单,全部的排名请看 https://bbs.csdn.net/topics/618243930。

  • idea中Translation插件翻译设置

    x666gsq: 为什么我没有other setting

  • mongodb查询大全mongo语句

    IT海木: 感谢大佬的辛勤整理,非常有用

最新文章

  • docker容器内存检测排查
  • KVM安装-kvm彻底卸载-docker安装Webvirtmgr
  • 在Windows系统上搭建MongoDB-这篇文章刚刚好
2024年8篇
2022年2篇
2021年23篇
2020年76篇
2019年26篇
2018年1篇

目录

目录

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

聚圣源黑水城大学生创新创业项目名称怎么起魔兽争霸防守地图厨房卫生间吊顶平舌音有哪些会务公司起名好看的重生小说会展公司起什么名字好聚民网登录寒冰王座3广字辈起名座男人小孩子起名女孩小名五行书院中国人民征信中心文娱缔造者电视剧金三角时装公司起名寓意好的字店铺起名网站免费冬字起名永恒余烬战锤巫师张姓起名男杨姓牛宝宝起名猪起名易用字菊子演员表我的一生为你守候你好旧时光百度云统计局谈猪肉价格下降卜起名给钻石戒指起名字好淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化