网站首页 > 开源技术 正文
HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。
访问HBuilder官方网站(http://www.dcloud.io),下载最新版的HBuilder,如下图所示。
在图上图中单击“下载”按钮,会出现下载提示框,如下所示。
在图片中可以看到HBuilder的当前版本、历史版本以及各平台的不同版本,读者在下载时根据自己的设备选择适合的版本即可。
HBuilder下载完成,解压到指定的路径后,双击启动文件HBuilder.exe,会出现一个启动页面,完成用户注册并登录后,便可开始使用HBuilder。HBuilder开发界面如图所示。
在上图中,左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目,右侧会出现一个HBuilder入门的窗口,该窗口中显示的内容是HBuilder官方的使用教程,提供了HBuilder的详细使用方法。
下面以新建项目、新建文件以及运行文件为例简单讲解HBuilder的使用。
首先,在C盘下创建jQuery目录用于保存项目文件。然后选择“文件”一“新建”→“Web项目”命令,打开“创建Web项目”对话框,如下所示。
在上图中,填写项目名称(如chapter01ln,选择项目的保存位置(如C:\jQuery),单击“完成”按钮创建Web项目。
最后,编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行,页面效果如下。
在上图中,单击方框内的图标,即可在浏览器运行此文件,页面效果如下所示。
HBuilder中有很多快捷键,开发者使用这些快捷键,可以更加高效地工作。HBuilder常用快捷键如表所示。
HBuilder 常用快捷键
- 上一篇: 品读东丽 | 春画东丽湖
- 下一篇: HBuilderX 3.7.9 安装教程(附安装包下载)
猜你喜欢
- 2025-01-14 跟我一起开发微信小程序——HBuilderX调试指定页面的使用技巧
- 2025-01-14 HBuilderX 自定义语法提示
- 2025-01-14 Vue项目的创建过程
- 2025-01-14 使用HBuilderX创建一个vue项目
- 2025-01-14 测试开发如何快速上手Vue前端开发(上)
- 2025-01-14 uni-app快速入门
- 2025-01-14 跨平台小程序开发者工具,HBuilder X 还是 VS Code
- 2025-01-14 HBuilderX 3.7.9 安装教程(附安装包下载)
- 2024-08-07 Vue.js 模板语法(vue.js基本语法)
- 2024-08-07 干货|SDK集成指南—iOS集成指南(android studio集成sdk)
你 发表评论:
欢迎- 05-15.net core集成vue
- 05-15Vue开发环境搭建
- 05-15创建Electron工程
- 05-15个人博客搭建保姆级教程3——hexo
- 05-15(实用派)Express之创建并配置运行vue项目
- 05-15package.json 与 package-lock.json 的关系
- 05-15deepin-linux的vue学习(二)git克隆开源vue项目和本地运行
- 05-15手把手教你搭建免费个人博客网站
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)