前端技术-Vscode 安装和使用 | 学习笔记

简介: 简介:快速学习前端技术-Vscode 安装和使用

开发者学堂课程【微服务+全栈在线教育实战项目演练(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 就可以使用了.

image.png


三、创建工作区(前端代码都写到工作区里面)

第一步:在本地硬盘里创建空文件夹

第二步:使用 vscode 打开创建空文件夹,将文件夹命名为 vs1010.

image.png

第三步:把文件夹保存成工作区,在文件中点击将工作区另存为...将文件名命名为1010,保存类型为 Code 工作区

(*.code-workspace).

image.png

若要打开工作区,点击文件→打开工作区→vs1010→选中文件 vs1010.code-workspace→打开

image.png

 

四、设置字体大小

左边栏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 ,则检查插件是否装对或者安装后是否重启.

相关文章
|
13天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
45 0
|
24天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
35 0
|
6天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
75 29
|
17天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
5天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
13 3
|
6天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
23 4
|
5天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
11 2
|
7天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
19 3
|
7天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
22 3
|
4天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
下一篇
无影云桌面