在本文之前，先给人人讲一下接下来须要装置的东西和他们之间的联络。

1. node: node是js效劳实行的环境，一般我们运用node完成前端的工程化。前端工程化有许多东西可以完成，比方webpack、glup等，他们都是基本node举行开辟的。
2. webpack: webpack是一个前端工程化的东西，我们运用webpack举行Vue项目的模块化治理。
3. Vue: Vue是一个前端框架，就像之前进修的Juquery框架一样，然则道理和完成和Jquery差别。
4. Vue-cli: Vue-cli是一个脚手架，，能让你异常容易地构建项目，包含了 Webpack，Browserify，以至 no build system。

Vue的装置

一、装置 node.js

1. node.js的官网下载node的装置包。
2. 装置完成以后翻开终端检察node的版本
   
3. 假如已装置过的然则版本太低，请运用后 npm install -g n 来晋级node

二、装置Vue-cli

1. 输入敕令行：npm install vue-cli -g //加 -g 是装置到全局
2. 装置完成以后，输入 vue -V 检察Vue的版本
   

初始化一个Vue-cli项目

1. 输入敕令： vue init webpack first
   
2. 输入敕令： cd first 进入first项目下面
3. 输入敕令: npm install 来装置项目所须要的模块
   
4. 装置完成时刻，输入敕令： npm run dev 运转项目
   
5. 翻开浏览器输入: localhost:8080 检察项目
   

6. 项目文件设置引见
   

   1.
   config：这个文件夹下面是这个项目的设置文件

   2.
   node_modules：项目的依靠模块，也是我们前面用敕令
   npm install 装置的内容

   3.
   src/componets：放vue文件的处所

   4.
   src/router：放项目路由的处所。vue-router重要用于差别页面之间的路由跳转

   5.
   app.vue：项目的根文件，一切的componets下面的 .vue 文件都邑衬着到app.vue内里

   6.
   main.js：项目的进口文件

vs code 的装置

一、下载装置包

1. 进入vs code的官网举行装置包的下载并装置。装置很简单，只须要一向点击下一步就好。
   
2. 装置完成以后翻开vs code
   

二、装置Vue的插件

翻开扩大视图

1. 装置vetur
   

   1) 可以完成在 .vue 文件中：语法错误搜检，包含 CSS/SCSS/LESS/Javascript/TypeScript

   2) 语法高亮，包html/jade/pug css/sass/scss/less/stylus js/ts

   3) emmet支撑

   4) 代码自动补全（现在照样初级阶段），包含 HTML/CSS/SCSS/LESS/JavaScript/TypeScript

2. 装置Auto Close Tag

   1) 在最先标记的完毕括号中键入时自动增加完毕标记

   2)插进去封闭标记后，光标位于最先和完毕标记之间

   3)设置不会自动封闭的标记列表

   4)自动封闭自动封闭标签

   5)支撑自动封闭标记为Sublime Text 3

   6)运用键盘快捷键或敕令选项板手动增加封闭标记

3. 装置Auto Rename Tag

   重命名一个HTML / XML标记时，会自动重命名配对的HTML / XML标记

4. 装置VS Color Picker

   1)键入色彩值或将插进去标记移动到色彩值内后，将自动启动选择器。

   2)VS Color Picker在Command Palette（Ctrl + Shift + P或Cmd + Shift + P）中实行敕令。

   3)绑定敕令的键extension.vs-color-picker。

以上，就是vue-cli和vs code 的装置与设置