使用VS Code运行前端代码

╰半橙微兮° 2023-10-12 15:52 8阅读 0赞

### 文章目录 ###

*  VS Code运行HTML文件
 *   *  一、安装VS Code 配置插件
     *  二、在电脑上新建文件夹
     *  三、新建文件【名字.html】
     *  四、运行.html文件
 *  VS Code运行VUE代码

--------------------

# VS Code运行HTML文件 #

`提示：这里可以添加本文要记录的大概内容：`

但是我在使用VS Code和Hbuilder的不同是：

Hbuilder我记得是可以在菜单栏的“文件”→“新建”→“HTML5+项目”，填写项目名称、路径等信息后点击“完成”即可创建一个新项目

## 一、安装VS Code 配置插件 ##

如何使用VS Code安装插件及VS Code上的常用插件[点我查看][Link 1]

以前写HTML用的是Hbuilder，最近突然发现VS Code也不错，只需要安装open in browser插件即可

![在这里插入图片描述][09eec99cdae442dcbded1adfd4f8378f.png]

## 二、在电脑上新建文件夹 ##

VS Code使用是在本地打开一个文件夹

先在电脑上新建个文件夹  
![在这里插入图片描述][d9098bd99b1e43868f64cf0cc6c4f03f.jpeg]  
打开VS Code  
然后选择【文件】→【打开文件夹】，找到刚才新建的文件夹  
![在这里插入图片描述][4d5f3622c88444fc9b30e42ac5fa5b01.png]

随后点开该文件夹，再次右键选择【新建文件夹】  
目的：做好文件分类  
![在这里插入图片描述][ed52de49916e4668827cb4bcf651a402.jpeg]

## 三、新建文件【名字.html】 ##

然后要再右键新建文件【名字.html】使用  
html文件图标会变成：`<>`  
css文件图标会变成：`#`  
![请添加图片描述][e0ca63a6cb9f4f6eb949a3b2a5dcf78a.jpeg]

## 四、运行.html文件 ##

进入页面输入：`html:5`回车，我们大部分代码是写在`body`标签下的  
下面是个简单的HTML页面展示：  
![在这里插入图片描述][7355a8f1ab534ef8bddf41d2e9d3b5c6.gif]

在文件里面还有个自动保存代码的功能  
![在这里插入图片描述][bd8d6ca2c7fc4c1d8316344ceba61d06.png]

--------------------

# VS Code运行VUE代码 #

[Vue-cli脚手架][Vue-cli]

[Link 1]: https://rej177.blog.csdn.net/article/details/131359363
[09eec99cdae442dcbded1adfd4f8378f.png]: https://img-blog.csdnimg.cn/09eec99cdae442dcbded1adfd4f8378f.png
[d9098bd99b1e43868f64cf0cc6c4f03f.jpeg]: https://img-blog.csdnimg.cn/d9098bd99b1e43868f64cf0cc6c4f03f.jpeg
[4d5f3622c88444fc9b30e42ac5fa5b01.png]: https://img-blog.csdnimg.cn/4d5f3622c88444fc9b30e42ac5fa5b01.png
[ed52de49916e4668827cb4bcf651a402.jpeg]: https://img-blog.csdnimg.cn/ed52de49916e4668827cb4bcf651a402.jpeg
[e0ca63a6cb9f4f6eb949a3b2a5dcf78a.jpeg]: https://img-blog.csdnimg.cn/e0ca63a6cb9f4f6eb949a3b2a5dcf78a.jpeg
[7355a8f1ab534ef8bddf41d2e9d3b5c6.gif]: https://img-blog.csdnimg.cn/7355a8f1ab534ef8bddf41d2e9d3b5c6.gif
[bd8d6ca2c7fc4c1d8316344ceba61d06.png]: https://img-blog.csdnimg.cn/bd8d6ca2c7fc4c1d8316344ceba61d06.png
[Vue-cli]: https://blog.csdn.net/rej177/article/details/131484713?spm=1001.2014.3001.5501