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

news2025/2/26 4:34:06

一、HBuilder X的下载

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

1. 点击链接进入网站后会看到如下页面

在这里插入图片描述

2.这里点击左上角HBuilderX极客开发工具

  • 显示如下
    在这里插入图片描述

  • 右击more按钮弹出弹窗,注意这里有正式版和Alpha版,选择第二个Alpha版,Mac用户同理
    在这里插入图片描述

  • 选择D盘保存安装文件,做好文件分类,以便于查找文件和文件管理(尽量不使用中文做文件名)
    在这里插入图片描述

4. 解压安装包

  • 这里我用的是7-Zip进行解压,选择好要解压到的文件夹后,点击确定
    在这里插入图片描述

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

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

  • 如果桌面上没有HBuilderX的快捷键,这里就需要我们手动进行快捷方式的创建了(右击"HBuilderX.exe">显示更多选项>发送到>桌面快捷方式)
    在这里插入图片描述

二、HBuilder X的使用

打开HBuilder X

  • 在桌面找到快捷方式双击或进入文件夹找到【HBuilder.exe】可执行文件进入HBuilder X开发编辑器,如下所示:
    在这里插入图片描述
  • 第一次登录需要你登录HBuilder账号,如果没有账户的可以进行注册,嫌麻烦不想登录的可以选择暂不登录,根据个人意愿即可,不会有什么影响,这个不是强制性的

了解HBuilder X编辑器

  • 进入后能看见HBuilder X的编辑器风格是卡其色为主,对眼睛保护较友好,里面有许多新手入门提示,不会的新手码农可以详细看看,也能起到对这个软件的一定认识作用
    在这里插入图片描述

  • 如果不喜欢这个颜色的主题,可以到选项栏找到工具,点击打开弹窗找到主题,选择自己喜欢的颜色,切换即可
    在这里插入图片描述

新建项目

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405425.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Ajax】如何通过axios发起Ajax请求

✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录axios  什么是axios  axios发起GET请求  axios发起POST请求  直接使用axios发起get…

JS解构赋值

一、前言 解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。本文将讨论解构赋值的作用与其用法。 目录 一、前言 二、用途 三、数组的解构 1.变量声明并且赋值时的解构 2.默认值 3.剩余数组赋值…

js字符串转换为对象格式的3种方法

背景: js字符串转换为对象格式,一般都会想到JSON.parse(),但数据不是标准的 JSON 格式的时候会解析出错,这时候就可以使用eval() 函数、new Function()方法来转换。 常用3种将字符串string转为json对象 方法: var str…

如何解决 npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

1、问题描述: 在vue项目中,当我们在终端使用指令:npm install 下载 node_modules (节点_模块) 时出现报错的情况。 node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。 主要是这个原因&…

基于Web的疫情防控管理系统

目 录 1 绪论........................................................................................................... 1 1.1 研究背景..................................................................................................................... 1 1…

前端如何调用后端接口进行数据交互(极简)

前端调用后端接口,获得数据并渲染 一、介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接…

vue2和vue3的区别(由浅入深)

前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力&#xf…

babel安装失败/报错详细解决方案报以下错误: core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended

babel安装失败/报错详细解决方案 **问题:**在VSCode中执行命令 npm install --global babel-cli 报以下错误: core-js2.6.12: core-js❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V…

Vue路由传参,页面刷新后参数丢失原因与解决方法

vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({path: "/test",query: {a: 1,b: 2} }) 这样我们就传递了两个参数,在 /test 页面 就可以接收这两个参数…

Python 万能代码模版:爬虫代码篇

你好,我是悦创。 很多同学一听到 Python 或编程语言,可能条件反射就会觉得“很难”。但今天的 Python 课程是个例外,因为今天讲的 **Python 技能,不需要你懂计算机原理,也不需要你理解复杂的编程模式。**即使是非开发…

Vite打包性能优化之开启Gzip压缩

在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等。除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip…

vue-router路由懒加载

路由懒加载指的是打包部署时将资源按照对应的页面进行划分,需要的时候加载对应的页面资源,而不是把所有的页面资源打包部署到一块。避免不必要资源加载。(参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载…

原生微信小程序/uniapp使用空格占位符无效解决方法

最近碰到一个需求&#xff0c;在一个<text>文本中的前后添加空格占位符&#xff0c;总所周知&#xff0c;我并不会前端&#xff0c;于是我查看了原生微信小程序以及uniapp官方文档&#xff0c;得到了以下答案&#xff1a; 原生微信小程序官方文档 uniapp官方文档 从文档…

毕业设计-基于微信小程序的校园二手闲置物品交易系统

目录 前言 课题背景与简介 实现设计思路 一、需求分析 二、微信小程序云开发框架及其设计流程 三、功能测试以及性能测试 四、总结 实现效果样例 更多帮助 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要…

如何创建一个vue项目(详细步骤)

一、环境准备 1、安装 node.js 下载地址&#xff1a;https://nodejs.org/en/ 2、检查是否安装成功&#xff1a;输出版本号说明安装成功 二、搭建 vue 环境 1、全局安装脚手架 vue-cli 在命令行输入&#xff1a; npm install vue-cli -g &#xff08;vue-lcli2) npm install…

前端面试题及答案整理(2022最新版)

收集整理2022年最新前端面试题及答案&#xff0c;方便平时翻看记忆&#xff0c;欢迎各位大佬们补充。 一般来说&#xff0c;把下面基础中的高频题写熟练就差不多了。当然去面大厂这些远远不够&#xff0c;还要再刷一些算法题。 基础 高频 1.手写 instanceof // 原理&#x…

【Node.js实战】一文带你开发博客项目(使用假数据处理)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

另一种解决Failed to execute goal on project xxx: Could not resolve dependencies for project com的方法

周青的日常问题记录 项目场景&#xff1a; 学习硅谷电商毕设项目_微服务版本&#xff0c;建站练手。进行到商城前端服务开发的用户服务 store-front-user阶段&#xff0c;pom文件导入依赖报错。 问题描述 报错为 Unresolved dependency: com.atguigu:store-commons:jar:1.0.0…

【 Apifox】Apifox接口设计

Apifox官网地址&#xff1a;http://apifox.cn/a103abcc 文章目录一、接口设计 (接口文档)二、如何定义接口&#xff1f;三、接口路径四、基础信息五、请求参数1.Params 参数2.Body 参数3.Body 参数类型六、参数中使用环境变量&#xff08;或全局变量/临时变量&#xff09;七、返…

VSCode中ESLint插件修复+配置教程

文章目录vscodeeslint插件配置教程如果不好用排查1: 如果出现后面回车符问题排查2: 保存时好了但是一瞬间代码又回来了排查3: 右下角是否开启eslint服务排查4: 如果保存还是变回去了排查5: ESLint不生效排查6: 如果都用心走了一遍, 还不行额外说明-新文件还是末尾换行问题vscod…