Vue + VS Code + helloworld

VUE官网地址：https://vuejs.org/

2014年2月发布第一个版本；
2016年10月1日Vue 2.0版本发布；
vue3在计划中

开发工具

常见开发工具有vscode、atom和sublimetext3，这里选择vscode.

vscode第一个版本发布于2015年，是一个由微软开发的，同时支持Windows、Linux、和macOS系统且开放源代码的代码编辑器。

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

环境配置

安装配置nodeJS

安装Node.js： https://nodejs.org/en/download
配置npm的全局模块的存放路径以及缓存的路径
在node.js的安装目录（C:\Program Files\nodejs）下新建两个文件夹node_cache和node_global方便集中管理。(因为默认会将模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间，所以下面两行的命令是修改模块保存的路径）
然后在命令行输入
npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"
将来用npm install XXX -g安装以后模块就在这两个文件夹里。
然后在C:\Users[你的用户名]下用记事本打开.npmrc文件就能看到新设置的两个路径啦。
配置npm的环境变量（因为上面修改了路径）在系统变path中新增一个变量C:\Program Files\nodejs\node_global\node_modules
随便安装一个软件，就能在C:\Program Files\nodejs\node_global\node_modules看到啦

安装cnpm（淘宝的npm）

使用淘宝的NPM镜像。

下载安装cnpm并且使用淘宝的服务器做为的包源。
输入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org
输入cnpm –v确认安装成功
在C:\Program Files\nodejs\node_global\node_modules目录下可看到cnpm文件夹和它的文件，在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd两个文件。

安装vue-cli（用来生成vue模版的工具）

vue-cli是脚手架，就是用配置好的模版快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模版名项目名，然后再有几个简单设置就建起项目了。

输入cnpm install vue-cli –g安装
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到vue-cli文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到vue的六个文件。
打开windows命令行（不要打开git bash命令行），输入vue init webpack test1新建一个项目，按照提示一般点击回车即可，但最后一步选择No I will handle that myselft，也就是创建完项目后由我自己来下载依赖，因为不想用默认的npm下载依赖。
然后输入cd test1进入项目目录，输入cnpm install下载安装项目的依赖完成后可在目录中看到所有有依赖；最后，输入cnpm run dev 后会给出提示让我们在浏览器通过http://localhost:8080地址访问

给vscode添加插件

安装插件

Vetur：提供了代码高亮,格式化,emmet,lint等核心功能
beautify：这是一个代码美化插件,提供了代码美化功能,当然我们并不直接用它,它为vetur提供了格式化html的功能
Prettier：提供格式化代码的功能,它可以使用eslint的配置,一键修改各种eslint问题,而且不增加快捷键,它通过增强原有的代码格式化功能来实现
ESLint：格式检查
Project Manager：项目管理,方便保存各种项目目录,
Bracket Pair Colorizer：让括号拥有独立的颜色，易于区分。可以配合任意主题使用。
vscode-fileheader：顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间
Aoto Close Tag：修改 html 标签，自动帮你完成尾部闭合标签的同步修改
HTMLHint：html代码检测
Path Intellisense：自动路径补全
vscode-icon：让 vscode 资源树目录加上图标，必备良品！
jQuery Code Snippets：jquery 重度患者必须品。
Debugger for Chrome：让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试，真666~ 配置稍微复杂一些
HTML SCSS Support：适用于非css项目,例如vue2/angular2+。
HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式
HTML Snippets：超级实用且初级的 H5代码片段以及提示
VueHelper vue代码碎片
Vue 2 Snippets vue2代码碎片
Javascript Standard Style 扩展程序；
Dracula Official: 主题

并不是每个都需要安装，按需安装即可，比如只装前6个。

配置插件

点击vscode->File->preference->settings，再点击界面右上角的花括号，即可看到类似如下界面：

image.png

添加如下内容：

{
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      },
     
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
     
    "eslint.options": {
        "plugins": ["html"]
    },

  "editor.detectIndentation": false,
  "editor.tabSize": 4,
  "prettier.tabWidth": 4,
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化

}

添加好的效果如下：