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

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

一、HBuilder X的下载

  • 这里我们前往HBuilder下载官网地址:https://www.dcloud.io/
  • 进入官网后,我们可以看到HBuilder目前有两个版本,一个是windows版,一个是mac版。下载一个自己电脑适合的版本,这里我下载步骤用的是windows版本,mac版本下载安装步骤同理。
1. 点击链接进入网站后会看到如下页面

hbuilder下载官网,前端,编辑器

2.这里点击左上角HBuilderX极客开发工具
  • 显示如下
    hbuilder下载官网,前端,编辑器

  • 右击more按钮弹出弹窗,注意这里有正式版和Alpha版,选择第二个Alpha版,Mac用户同理
    hbuilder下载官网,前端,编辑器

  • 选择D盘保存安装文件,做好文件分类,以便于查找文件和文件管理(尽量不使用中文做文件名)
    hbuilder下载官网,前端,编辑器

4. 解压安装包

  • 这里我用的是7-Zip进行解压,选择好要解压到的文件夹后,点击确定
    hbuilder下载官网,前端,编辑器

  • 找到解压好的文件,点进去,找到"HBuilderX.exe"可执行文件

  • 双击文件,进入HBuilder X开发编辑器,(注意,HBuilderX不需要安装,解压完成即可使用)

  • 如果桌面上没有HBuilderX的快捷键,这里就需要我们手动进行快捷方式的创建了(右击"HBuilderX.exe">显示更多选项>发送到>桌面快捷方式)
    hbuilder下载官网,前端,编辑器

二、HBuilder X的使用

打开HBuilder X
  • 在桌面找到快捷方式双击或进入文件夹找到【HBuilder.exe】可执行文件进入HBuilder X开发编辑器,如下所示:
    hbuilder下载官网,前端,编辑器
  • 第一次登录需要你登录HBuilder账号,如果没有账户的可以进行注册,嫌麻烦不想登录的可以选择暂不登录,根据个人意愿即可,不会有什么影响,这个不是强制性的
了解HBuilder X编辑器
  • 进入后能看见HBuilder X的编辑器风格是卡其色为主,对眼睛保护较友好,里面有许多新手入门提示,不会的新手码农可以详细看看,也能起到对这个软件的一定认识作用
    hbuilder下载官网,前端,编辑器

  • 如果不喜欢这个颜色的主题,可以到选项栏找到工具,点击打开弹窗找到主题,选择自己喜欢的颜色,切换即可
    hbuilder下载官网,前端,编辑器文章来源地址https://www.toymoban.com/news/detail-803357.html

新建项目

  • 新建一个项目,依次点击 文件>新建>项目,也可以使用快捷组合键Ctrl+N,选择 项目 快速新建
    hbuilder下载官网,前端,编辑器
  • 点击项目后,取名,我选择的是一个空项目,后续可以进行其他文件创建,根据个人选择,然后点击创建 (尽量不使用中文)
    hbuilder下载官网,前端,编辑器
  • 点击创建好的项目,右击进行需要创建的文件类型,这里可以创建一个目录(也可以不需要),对文件进行划分,可以更好的归纳文件类型
    hbuilder下载官网,前端,编辑器
  • 这里演示一个HTML文件创建
    hbuilder下载官网,前端,编辑器
  • 点击html文件后,取名,然后创建
  • 最后如下所示
    hbuilder下载官网,前端,编辑器
  • 那么HBuilder X的下载和使用就大致讲这么多了,有不懂的可以留言评论,记得一键三连,点赞收藏加关注

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

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

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

相关文章

  • 如何用Hbuilder创建一个微信小程序的前端界面

    目录 1.下载Hbuuilder软件https://www.dcloud.io/hbuilderx.html 2.打开软件 3.选择默认模板 4.创建项目成功 5.获取APPid 6.立即注册小程序 7.注册完成之后,登录小程序 8.复制Appid到微信小程序发行 9.在目录manifest.json配置中,配置Uni-app的(AppID) 10.点击发行 11.下载微信开发者工具 12.假如遇到报

    2024年04月17日
    浏览(89)
  • 使用HBuilder运行钉钉小程序

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

    2024年02月16日
    浏览(66)
  • uniapp和springboot微信小程序开发实战:前端架构搭建之HBuilder X创建项目以及目录介绍

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月13日
    浏览(22)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包