![循序渐进Vue.js 3前端开发实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/328/47217328/b_47217328.jpg)
1.2.1 准备开发工具
HTML文档本身也是一种文本,我们可以使用任何文本编辑器进行HTML文档的编写,只需使用.html文本后缀名即可。但是使用一个强大的HTML编辑器可以极大地提高编写效率,例如很多HTML编辑器都会提供代码提示、标签高亮、标签自动闭合等功能,这些功能都可以帮助我们在开发中十分快速地编写代码,并且可以减少因为笔误所产生的错误。
Visual Studio Code(VSCode)是一款非常强大的编辑器,其除了提供语法检查、格式整理、代码高亮等基础编程常用的功能外,还支持对代码进行调试和运行以及版本管理。通过安装扩展,VSCode几乎可以支持目前所有流行的编程语言。本书示例代码的编写也将采用VSCode编辑器完成。你可以在官方网站(https://code.visualstudio.com)下载新的VSCode编辑器。
目前,VSCode支持的操作系统有macOS、Windows和Linux,在网站中下载适合自己操作系统的VSCode版本进行安装即可,如图1-1所示。
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P16_939.jpg?sign=1738868874-hLFAWS4Stvdj18IZO4aF3dS7sHXUHcvg-0-ab6332d7990e01586190ffa3741dac82)
图1-1 下载VSCode编辑器软件
下载安装VSCode软件后,我们可以尝试使用其创建一个简单的HTML文档,新建一个名为test.html的文件,在其中编写如下测试代码:
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P16_1014.jpg?sign=1738868874-eNuWjFiEfkE1fIaJMYW3UC1S3AyuBVCf-0-645929c82b4097d082b2997ab6120830)
相信在输入代码的过程中,你已经能够体验到使用VSCode编程带来的畅快体验,并且在编辑器中关键词的高亮显示和自动缩进也使代码结构看上去更加直观,如图1-2所示。
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P16_1010.jpg?sign=1738868874-AjiQWPU2KJhwHbVelK9LXxHNwvM3HpZw-0-3e2a602d4dabc3e1bc186161c9c604ad)
图1-2 VSCode的代码高亮显示与自动缩进功能
在VSCode中将代码编写完成后,我们可以直接对其进行运行。对于HTML源文件的运行,VSCode会自动将其以浏览器的方式打开,选择VSCode工具栏中的Run→Run Without Debugging选项,如图1-3所示。
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P17_1018.jpg?sign=1738868874-wFd6SMvRZITSBVvJzH7RMakoioi7zxDV-0-c6d5792260f1cd4c27a941914e6b09fd)
图1-3 运行HTML文件
之后会弹出环境选择菜单,我们可以选择一款浏览器进行预览,如图1-4所示。建议安装Google Chrome浏览器,其有很多强大的插件可以帮助我们进行Web程序的调试。
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P17_1022.jpg?sign=1738868874-rhgO9STS5qXix3hStuI56soATOehVKEp-0-18ade657ac0ec902167dc7a8228c06d2)
图1-4 使用浏览器进行预览
预览效果如图1-5所示。
![](https://epubservercos.yuewen.com/4402A2/26581624701358006/epubprivate/OEBPS/Images/Figure-P17_1025.jpg?sign=1738868874-RYUQASE5m2JpH3GX5M3dESQqMLa7rHm0-0-f29f948b3276ed6b3b1a508e48bbe867)
图1-5 使用HTML实现的HelloWorld程序