当前位置:首页 > 实用技巧 >

hbuilderx安装步骤(hbuilderx怎么导入本地文件)

来源:原点资讯(www.yd166.com)时间:2023-11-14 03:24:41作者:YD166手机阅读>>

HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5 、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。

访问HBuilder官方网站(http://www.dcloud.io),下载最新版的HBuilder,如下图所示。

hbuilderx安装步骤,hbuilderx怎么导入本地文件(1)

在图上图中单击“下载”按钮,会出现下载提示框,如下所示。

hbuilderx安装步骤,hbuilderx怎么导入本地文件(2)

在图片中可以看到HBuilder的当前版本、历史版本以及各平台的不同版本,读者在下载时根据自己的设备选择适合的版本即可。

HBuilder下载完成,解压到指定的路径后,双击启动文件HBuilder.exe,会出现一个启动页面,完成用户注册并登录后,便可开始使用HBuilder。HBuilder开发界面如图所示。

hbuilderx安装步骤,hbuilderx怎么导入本地文件(3)

在上图中,左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目,右侧会出现一个HBuilder入门的窗口,该窗口中显示的内容是HBuilder官方的使用教程,提供了HBuilder的详细使用方法。

下面以新建项目、新建文件以及运行文件为例简单讲解HBuilder的使用。

首先,在C盘下创建jQuery目录用于保存项目文件。然后选择“文件”一“新建”→“Web项目”命令,打开“创建Web项目”对话框,如下所示。

hbuilderx安装步骤,hbuilderx怎么导入本地文件(4)

在上图中,填写项目名称(如chapter01ln,选择项目的保存位置(如C:\jQuery),单击“完成”按钮创建Web项目。

最后,编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行,页面效果如下。

hbuilderx安装步骤,hbuilderx怎么导入本地文件(5)

在上图中,单击方框内的图标,即可在浏览器运行此文件,页面效果如下所示。

HBuilder中有很多快捷键,开发者使用这些快捷键,可以更加高效地工作。HBuilder常用快捷键如表所示。

HBuilder 常用快捷键

hbuilderx安装步骤,hbuilderx怎么导入本地文件(6)

栏目热文

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

开发语言:Html5开发工具:HBuilderX先说一下,开发工具下载,可以直接去百度搜HBuilderX,百度搜“HB...

2023-11-14 03:46:58查看全文 >>

hbuilderx微信小程序教程(微信小程序lv教程)

hbuilderx微信小程序教程(微信小程序lv教程)

主讲人:笨小猪 QQ 1218764060 微信:liufeicloud 官网:【什么是HBuilder X?】HBui...

2023-11-14 03:11:07查看全文 >>

hbuilderx实例教程视频(最新版hbuilderx使用方法)

hbuilderx实例教程视频(最新版hbuilderx使用方法)

HBuilderX是一款轻巧、高效、极速的编辑器 IDE合体程序,它的前身Hbuilder是最好用的JavaScript...

2023-11-14 03:12:30查看全文 >>

交通运输结构概念(交通运输结构的作用)

交通运输结构概念(交通运输结构的作用)

运输结构是产业结构中的一个子系统,是反映国民经济运行状态的基础性结构,具体是指由不同运输方式的组合模式和相互关系,一般包...

2023-11-14 03:28:43查看全文 >>

交通运输方式和布局(交通运输方式详细介绍)

交通运输方式和布局(交通运输方式详细介绍)

因为喜欢,所以专注博易地理2020.4.20思维导图思维导图考点详谈一、主要交通运输方式一般利用比较法,掌握五种交通运输...

2023-11-14 03:20:02查看全文 >>

hbuilderx 官网(hbuilderx是免费软件吗)

hbuilderx 官网(hbuilderx是免费软件吗)

现在前端开发大多数使用的是VSCode,VSCode确实强大,它有很多的优点,这里就不多赘述了,但是VSCode有一个不...

2023-11-14 03:53:32查看全文 >>

hbuilderx详细教程(hbuilder x安装教程)

hbuilderx详细教程(hbuilder x安装教程)

代码块是快速开发的利器。简单的敲几个字母,回车,就能生成大段代码。比如我们经常会敲if...else结构,在HBuild...

2023-11-14 03:24:13查看全文 >>

hbuilder入门(hbuilder使用方法)

hbuilder入门(hbuilder使用方法)

HTML的入门1. HTML的代码文件(1)打开Hbuilder开发工具,新建项目,点击右键新建一个HTML文档。(2)...

2023-11-14 03:34:39查看全文 >>

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

之前一直使用的是2.6.X的版本,今天更新了一下HBuilderX,更新到了3.1.13。打包app的时候出现了错误,查...

2023-11-14 03:34:33查看全文 >>

hbuilder个人简介(怎么用hbuilder做个人介绍)

hbuilder个人简介(怎么用hbuilder做个人介绍)

在开发实践中,会使用到各种第三方组件,比如Element UI,通常的做法是到官网中复制模板再在本地根据设计要求进行修改...

2023-11-14 03:48:26查看全文 >>

文档排行