全栈⼯程师必备VSCODE编辑器和开发环境搭建

第1集 前端主流编辑器VSCode安装

 简介：前端编辑器vscode安装

• 前端编辑器 

        vscode：免费开源的现代化轻量级代码编辑器，⽀持⼤部分主流的开发语⾔的语法⾼亮、智

        能代码补全、⾃定义热键、代码对⽐ Diffff 、 GIT 等特性，⽀持插件扩展，软件跨平台⽀持

        Win、 Mac 以及 Linux

        其他：sublime 、 hbuilder 、 webstorm

 vscode安装地址：https://code.visualstudio.com/Download

设置为中⽂语⾔环境，这⾥需要使⽤快捷键来实现 win: 【 Ctrl+Shift+P 】 mac:

【 Command+Shift+P 】

在弹出的搜索框中输⼊【 confifigure language 】，然后选择搜索出来的【 Confifigure Display

Language 】

Window 系统 参考⽂档 https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html

第2集 互联⽹公司前端开发环境搭建之Node和Npm介绍

简介：搭建node环境和npm安装 

• 什么是NodeJS: Node.js 就是运⾏在服务端的 JavaScript 
• 什么是npm: nodejs的包管理⼯具，可以下载使⽤公共仓库的包，类似maven 包安装分为本地安 装（local）、全局安装（global）两种

 

npm install express # 本地安装 express

npm install express -g # 全局安装 express

npm list -g # 查看所有全局安装的模块

Node安装包：http://nodejs.cn/download/ 

新版的nodejs已经集成了npm，所以npm也⼀并安装好 

苹果系统Mac安装node和npm： brew install nodejs brew install npm 

Window 安装 node 和 npm 下载后⼀步步安装就⾏ 参考⽂档： https://www.jianshu.com/p/03a76

b2e7e00

验证是否成功 

 node -v

npm -v 

第3集 切换npm镜像源为淘宝npm镜像 

简介：修改npm镜像源为国内 

        类似maven ，从国外下载包很慢，所以就有⼈改成国内的 maven 仓库就会快很多，或者搭建⾃⼰本地的私服

        国内直接使⽤ npm 的官⽅镜像是⾮常慢的，推荐使⽤淘宝 NPM 镜像。

淘宝 NPM 镜像是⼀个完整 npmjs.org 镜像，可以⽤此代替官⽅版本

 使⽤淘宝定制的 cnpm 命令⾏⼯具代替默认的 npm:(需要管理员权限)

 npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使⽤ cnpm 命令来安装模块了： 

cnpm install [name] 

更多信息可以查阅：https://developer.aliyun.com/mirror/NPM 

 第4集 新版Vue + 脚⼿架Vue-Cli 4.3 安装

简介：本地搭建Vue 、CLI、Cube-UI相关框架 

什么是 VUE ⼀套⽤于构建⽤户界⾯的渐进式框架。与其它⼤型框架不同的是， Vue 被设计为可以

⾃底向上逐层应⽤。 Vue 的核⼼库只关注视图层，不仅易于上⼿，还便于与第三⽅库或既有项⽬整

合 . ⽂档： https://cn.vuejs.org/

安装新版 Vue ( 直接使⽤ cli)

npm install vue ( 可以不⽤ )

什么是 VUE-CLI Vue 提供了⼀个官⽅的 CLI ，为单⻚⾯应⽤ (SPA) 快速搭建繁杂的脚⼿架

安装 新版 vue-cli（脚手架搭建项目）

cnpm install -g @vue/cli

cnpm install -g @vue/cli-init

使⽤vue-cli创建项⽬（测试项⽬，验证vue环境） 前提必须安装Vue脚手架

vue create my-project 

 第5集 VsCode导⼊⼩滴课堂前端项⽬

  简介：使⽤VSCODE导⼊⼩滴课堂前端项⽬

        vcscode 初次打开vue项⽬，推荐安装 

                vetur 插件: vue ⽂件基本语法的⾼亮插件

                setting.json添加配置

                eslint 插件 : 智能错误检测插件，在具体开发中作⽤很⼤，能够及时的帮我们发现错误

                setting.json 添加配置

最终配置

{

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

},

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

],

"eslint.options": {

"plugins":["html"]

}

}

VsCode代码快捷键：Vue 2 Snippets 、 Vue Peek 

导⼊⼩滴课堂前端项⽬

启动后端项⽬，⼀直运⾏后台，你们学习的时候记得检查（端⼝是 8089 ）

为啥要先讲这个呢？ 可以快速知道⼤致开发的内容，带着疑惑学习，更容易掌握