开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-Vscode 安装和使用】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11297
前端技术-Vscode 安装和使用
内容简介:
一、前端开发
二、安装前端开发工具 vscode
三、创建工作区
四、设置字体大小
五、怎样写代码?
一、前端开发
前端的主要作用是用于数据显示,在招聘网站上找工作一般都会有前端工程师。
在日本和一些人口比较稀疏的国家,例如加拿大、澳洲等,流行"full-Stack Engineer" ,也就是我们通常所说的全栈工程师。
通俗点说就是一个人除了完成前端开发和后端开发工作以外,有的公司从产品设计到项目开发再到后期运维可能都是同一个人,甚至可能还要负责 UI、配动画,也可以是扫地、擦窗、写文档维修桌椅等等。
而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确,整个项目开发分为前端、中间层和后端三个开发阶段,这三个阶段分别由三个或者更多的人来协同完成。
国内的大部分互联网公司只有前端工程师和后端工程师,中间层的工作有的由前端来完成,有的由后端来完成。
二、安装前端开发工具 vscode
安装 vscode 后需要安装插件,让应用更加方便
1.怎样安装插件?
在扩展中搜索以下插件 Chinese (Simplified) Language pack for Visual S, Live Server(内置服务器), Vetur(用于 vue 开发,安装后可以看到 vue 代码颜色的变化), vue-helper,点击安装.安装完成后,重新加载过或重启 vscode 就可以使用了.
三、创建工作区(前端代码都写到工作区里面)
第一步:在本地硬盘里创建空文件夹
第二步:使用 vscode 打开创建空文件夹,将文件夹命名为 vs1010.
第三步:把文件夹保存成工作区,在文件中点击将工作区另存为...将文件名命名为1010,保存类型为 Code 工作区
(*.code-workspace).
若要打开工作区,点击文件→打开工作区→vs1010→选中文件 vs1010.code-workspace→打开
四、设置字体大小
左边栏Manage→settings→搜索"font"→Font size
五、怎样写代码?
右键点击工作区的名称→新建文件夹 demo1→在 demo 中新建文件夹01.html
例如:<h1>hello vscode!</h1>
执行:
点击右键→Open with live Server点击后就会打开默认浏览器就会显示 hello vscode!
如果打不开,直接在浏览器中输入 http://127.0.01:5500/找到自己的文件打开 demol/01.html. 若右击没有 Open with live Server ,则检查插件是否装对或者安装后是否重启.