vue-cli安装和vs code 的相关配置

在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。

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 的安装与配置