前端开发中VSCode的最基本入门使用

一、前端开发

  • 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可,到了2010年,互联网开始全面进入移动时代,前端开发的工作越来越重要

  • 最初所有的开发工作都是由后端工程师完成的,随着业务越来越繁杂,工作量变大,于是我们将项目中的可视化部分和一部分交互功能的开发工作剥离出来,形成了前端开发。

  • 由于互联网行业的急速发展,导致了在不同的国家,有着截然不同的分工体制

  • 日本和一些人口比较稀疏的国家,例如加拿大、澳洲等,流行“Full-Stack Engineer”,也就是我们通常所说的全栈工程师。通俗点说就是一个人除了完成前端开发和后端开发工作以外,有的公司从产品设计到项目开发再到后期运维可能都是同一个人,甚至可能还要负责UI、配动画,也可以是扫地、擦窗、写文档、维修桌椅等等。

  • 而在美国等互联网环境比较发达的国家项目开发的分工协作更为明确,整个项目开发分为前端、中间层和后端三个开发阶段,这三个阶段分别由三个或者更多的人来协同完成。

  • 国内的大部分互联网公司只有前端工程师和后端工程师,中间层的工作有的由前端来完成,有的由后端来完成。

二、下载安装和初始设置VS Code

1. 下载地址

下载地址: https://code.visualstudio.com/

2. 中文界面配置

  • 首先安装中文插件:Chinese (Simplified) Language Pack for Visual Studio Code
  • 右下角弹出是否重启vs,点击“yes”
  • 有些机器重启后如果界面没有变化,则 点击 左边栏Manage -> Command Paletet…【Ctrl+Shift+p】
  • 在搜索框中输入“configure display language”,回车
  • 打开locale.json文件,修改文件下的属性 “locale”:“zh-cn”
{
	// 定义 VS Code 的显示语言。
	// 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051,了解支持的语言列表。
	
	"locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。
}
  • 重启vs

3. 插件安装

为方便后续开发,建议安装如下插件(红色矩形框标记的插件)
在这里插入图片描述

4. 插件安装

  • vscode本身没有新建项目的选项,所以要先创建一个空的文件夹,如project_xxxx。
  • 然后打开vscode,再在vscode里面选择 File -> Open Folder 打开文件夹,这样才可以创建项目。

5. 保存工作区

  • 打开文件夹后,选择“文件 -> 将工作区另存为…”,为工作区文件起一个名字,存储在刚才的文件夹下即可

6.在工作区下新建文件夹和网页

7. 预览网页

方式1: 以文件路径方式打开网页预览

  • 安装open in browser插件:
  • 文件右键 -> Open In Default Browser

方式2: 以服务器方式打开网页预览

  • 需要安装“Live Server”插件:
  • 文件右键 -> Open with Live Server

8、设置字体大小

左边栏Manage -> settings -> 搜索 “font” -> Font size

为什么要学习服务端渲染 nuxt.js ? 现在我们的项目大多数都是SPA(单页面应用),在实际开发过程单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。但是,SPA不利于SEO(搜索引擎优化)。让搜索引擎更为信任该网站,通过提升排名获得更多网站流量,对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景。在我们开发的过程,我们有 SEO 的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSR。SSR保证用户尽快看到基本的内容,也使得用户体验性更好。 Nuxt.js 是一个 Node 程序,基于vue.js开发的一套服务端渲染的框架,必须使用 Node 环境。我们对 Nuxt.js 应用的访问,实际上是在访问这个 Node.js 程序的路由,程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码,而路由是由 Nuxt.js 约定好的 pages 文件夹生成的,开发只需要遵循一定的约定,直接使用vue.js开发我们项目也是非常轻松的。 课程案例 (1) HOME PAGE (2) Jokes Page  (3)About Page  课程概述 在本课程,大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目,带着大家来体验服务端渲染(SSR )项目构建的过程;介绍 nuxt.js项目目录的结构,每个文件夹和文件的基本概念和作用,以及nuxt.config.js 配置文件的基本介绍;页面公共结构处理,路由页面跳转配置处理;axios 接口请求;带着大家来熟悉及掌握 bootstrapVue UI组件库的使用
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页