vue学习的第一步，vscode介绍及相关插件安装

1：vsvode简介

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

 

还有其几款ide,webstorm,Sublime,text3等，看个人喜好而定。

2：vue简介

Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js 一起，并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

3：vscode下载及相关插件安装

3.1：vscode下载地址：https://code.visualstudio.com/Download

3.2：vetur插件安装：支持vue代码高亮显示。

3.3：ESLint插件安装：是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码

 

3.4：安装nodejs,运行前端代码并在浏览器中访问必须安装，可以把它理解为一个轻量级的JSP或PHP环境，但是用来开发Web应用的话，有时要便捷很多。

 

下载地址：https://nodejs.org/en/download/

安装完成后，打开cmd命令窗口，执行node -v验证

 

4：项目测试

vueAdmin-template是 一个简单的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这里以它来演示

下载地址：https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template

4.1：下载解压到随便一个磁盘位置

4.2：打开vscode,file->open Folder，加载目录

4.3：打开终端：Terminal->New Terminal进入终端，这里默认为当前项目目录

4.4：执行命令：npm install

如果报错，请确认vscode是以管理员权限运行,cmd窗口运行node -v,npm -v是否正常。

4.5：执行命令：npm run dev

4.6：在浏览器上就可以访问了http://localhost:9528/

5：将项目编译成静态页面

执行命令：npm run build:prod

vscode的版本不同，命令会有区别，查看这个文件package.json,找到图中红圈的地方，有的地方叫build,有的叫buildprod

 

6：发布打包的文件

上一步打包成功后，会在目录中生成一个dist的文件夹，将文件夹放到nginx的html文件夹中，就可以访问了。