前端开发：详解Vscode搭建Vue开发环境

前端编辑器

vscode：免费开源的现代化轻量级代码编辑器，支持大部分主流的开发语言的语法高亮、智能代码补全、自定义热键、代码对比 Diff、GIT 等特性，支持插件扩展，软件跨平台支持 Win、Mac 以及 Linux。 其他编辑器：sublime、hbuilder、webstorm

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

设置编译器为中文语言环境，这里需要使用快捷键来实现
windows系统:【Ctrl+Shift+P】
mac系统:【Command+Shift+P】

在弹出的搜索框中输入【configure language】，然后选择搜索出来的【Configure Display Language】，之后下载中文插件，下载完成之后重启软件即可。

前端开发环境搭建之Node和Npm

什么是NodeJS？
答：Node.js 就是运行在服务端的 JavaScript

什么是npm？
答：nodejs的包管理工具，可以下载使用公共仓库的包，类似maven 包安装分为本地安装（local）、全局安装（global）两种

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

Node安装包下载地址: nodejs.cn/download/.

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

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

Window安装node和npm 下载后一步步安装就行 参考文档：

验证是否成功，如果显示版本号即安装成功
node -v
npm -v

切换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]

1. Vue + 脚手架Vue-Cli 4.3 安装

什么是Vue： 一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
文档: cn.vuejs.org/.

安装新版Vue (直接使用 cli)
npm install vue (可以不用)

什么是Vue-Cli？
Vue 提供了一个官方的 Cli，为单页面应用 (SPA) 快速搭建繁杂的脚手架

安装 新版vue-cli （如果使用了淘宝源的话，则使用cnpm安装）

npm install -g @vue/cli
npm install -g @vue/cli-init

使用vue-cli创建项目（测试项目，验证vue环境）

vue create project

 

第二步：选择默认编辑器，直接回车就行

第三步：创建完成，使用cd project进入创建的文件夹project，之后使用npm run serve进行启动项目。

第四步：将http://localhost:8080/输入到浏览器即可访问。

至此，Vue与Vue-cli安装完成。

2. 基于webpack运行Vue项目

1.安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

2.用vue-cli构建项目

在指定目录下，在命令行中运行命令 vue init webpack first-vue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中first-vue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中，如下图。

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

3.安装项目所需的依赖
要安装依赖包，首先cd到项目文件夹（first-vue文件夹），然后运行命令 cnpm install ，等待安装。

安装完成之后，会在我们的项目目录first-vue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

4.运行项目
在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

3. 安装vscode插件

1.安装vetur插件，是vue语法的高亮插件。

直接搜索安装即可。
2.安装eslint插件，是智能错误检测插件。

先npm install -g eslint 全局安装eslint，然后在vscode扩展里面搜索eslint插件进行安装。