济宁君天建设公司网站,企业网站建设预算方案,建设网站的目标,wordpress 文章获取接口本篇目标
了解市面上常用的前端集成开发环境#xff08;ide#xff09;掌握 HBuiberX 的使用#xff1a;下载安装#xff0c;新建项目、网页、运行网页。
内容摘要
本篇介绍了市面上流行的几款前端集成开发环境#xff08;ide#xff09;#xff0c;并介绍了 Hbuilde…本篇目标
了解市面上常用的前端集成开发环境ide掌握 HBuiberX 的使用下载安装新建项目、网页、运行网页。
内容摘要
本篇介绍了市面上流行的几款前端集成开发环境ide并介绍了 HbuilderX 的安装和使用。
阅读时间预计10~15分钟。
集成开发环境ide
俗话说工欲善其事必先利其器用记事本写html虽然可以但是效率太低了并且后续网页文件多了也不方便管理。
这边介绍几款好用的前端开发工具方便提高开发效率它们包含了编辑、运行、调试等功能俗称集成开发环境英文全称为Integrated Development Environment简称就是ide。
其中常见的几款前端开发工具如下
1. HBuilderX 国人开发简单易用。
2. VsCode 微软开发很受欢迎。
3. WebStorm 重量级的ide功能全。
4. Sublime 高级记事本需要配合插件使用。1 HBuilderX
HBuilderX 国人开发的ide小巧轻便开箱即用符合国人的使用习惯界面也特别清爽护眼而且还是免费的。
2 VsCode
VsCode 是由微软开发的ide开源免费社区活跃可以配置插件应用各种场景开发目前是很受欢迎的编辑器。
3 WebStorm
JetBrains 出品的ide重量级的ide和 HBuilderX 一样开箱即用功能也非常强大。 不过这个是收费软件另外因为重会比较吃资源如果电脑不是很好运行起来会比较卡。
4 Sublime
Sublime 看起来更像是一个高级的记事本通过插件也可以实现前端开发。 是收费软件可以无限期试用但是会有激活提示弹窗。
这边大家可以根据自己的使用习惯选择适合的ide前期如果不太熟悉的话推荐使用 HBuilderX主要就是因为它小巧、免费、开箱即用。
后续的代码演示都会在 HBuilderX 上进行下面介绍一些 HBuilderX 的简单使用。
HBuilderX使用
1 下载软件
前往官网进行下载
https://www.dcloud.io/hbuilderx.html根据自己的操作系统选择相应的版本我们选择标准版进行下载。
备注
上面贴的地址在写作时可以正常访问但是万事万物并非一成不变。如果不能访问大家可以通过百度搜索找到相应的下载地址。
在后续的学习和工作中我们会碰到各种各样的问题学会使用百度搜索解决问题也是一项重要的技能。
2 安装
windows版本是一款绿色软件解压后找到其中的 HBuilderX.exe 运行即可。一般来讲可以将其解压到 C:\Program Files 目录然后在桌面设置快捷方式。
mac版本是dmg的安装包文件直接安装即可。
3 新建项目
网页文件一般都是在项目下面我们需要先新建一个项目可以通过如下方式新建一个项目
文件 - 新建 - 项目输入项目名称演示项目 。
4 新建网页
项目建完后就可以在项目下面新建网页文件了。
右键点击项目 - 新建 - html文件文件名称为hello.html新建完成后 hello.html 网页文档结构就都有了这个就是使用ide的好处了。我们在body标签内输入 “Hello ide!” 内容。
如果是按照上面一步一步操作下来最后应该是的一个页面 5 运行网页
运行网页可以通过
运行 - 运行到浏览器 - Chrome在谷歌浏览器上就可以看到如下输出了 技巧
除了通过操作菜单运行网页文件我们也可以通过快捷键的方式
ctrl r - 1一般来讲ide的菜单上都会有相关的快捷键说明在使用的时候留意一下多使用几次就熟悉了。
熟练使用快捷键能极大的提高学习和工作效率。
了解
和之前不一样使用 HBuilderX 运行网页文件会运行一个内置的web服务端口是用8848。
网页文件编写好后要给其他人访问就需要部署在服务器上这边先了解一下即可。
本篇总结
使用集成开发环境可以提高学习和工作效率。根据自己的使用习惯选择工具即可前期不熟的话推荐用HBuilderX。HBuilderX下载安装、新建项目、网页、运行网页。
练习题
ide是什么为什么要使用ide使用百度搜索的方式找到HBuilderX官网并下载安装。使用HBuilderX进行开发新建项目、网页并运行。
