美文网首页
第一弹 开发环境搭建

第一弹 开发环境搭建

作者: Mr_Lxh | 来源:发表于2019-10-09 08:43 被阅读0次

踟躇了很久,终于痛下决心,搞一搞Web(苦笑...) 。网上的教程很多,但是能详细描述,顺利构建的很少,好多细节话不多说,搬砖~

一、下载VSCode和浏览器(本人学习Web用的是VS)

这里附上VSCode官网地址VSCode下载
浏览器推荐谷歌浏览器下载地址

二、VSCode使用概览

vsCode界面

1.资源管理器
用于新建、编辑、删除文件或文件夹等操作
2.搜索框
用于条件搜索
3.源代码管理
用于源代码管理程序注册
4、调试
用于调试程序
5、扩展/插件
管理插件
6、git
创建仓储管理

二、安装插件(以汉化插件为例)

插件安装
安装步骤:

1、点击扩展 进入安装插件界面
2、在应用商店搜索框中输入chinese
3、选取中文简体插件安装

推荐的2款插件

1、Live Server
2、open in browser

三、 设置文本自动保存

设置自动保存

如图。点击设置,选择setting后 显示上图界面 。在界面中输入auto save 默认是关闭状态 选择自动保存模式 设置时间范围

四、写出第一个自己的 hello world

操作步骤(三步一张图):

1、点击资源管理器,新建文件
2、选中文件 右击另存为 选择文件夹目录 将文件存为.html格式
3、在文件中输入 !然后 按tab 键 系统会自动生成一段代码 整体流程如下图所示

第一个helloWorld

接下来继续

1、将title 改为“第一个文件”
2、在body中插入<p>标签 文本写第一个hello world!
3、右键 选择open with Live Server

第一个 helloworld

执行效果 如下图

第一个helloworld

至此,大功告成!

五、总结

那么这篇文章我们学到了哪些知识?
1、开发环境的搭建和使用

2、插件的安装和使用
3、文件的创建和调试

相关文章持续更新中···

相关文章

网友评论

      本文标题:第一弹 开发环境搭建

      本文链接:https://www.haomeiwen.com/subject/tmflyctx.html