转载自：https://blog.csdn.net/HinKai/article/details/82981975
*此教程适用于Windows环境下 Author:Sinclair CreateDate:2018-10-09
1.安装node.js
下载地址：https://nodejs.org/en/download/
(LTS代表长期支持版本，一般新手建议使用这个版本，因为这个版本使用的人最多，出问题能找到解决方案的概率较大。)
下载好后就可以直接开始安装，一路Next到选择安装路径就刹刹车来选择心仪的路径，然后就可以一路Install到Finish就表示安装完成了。
接着就使用管理员身份打开CMD，在打开的命令行界面，依次输入命令回车：
如果正确输出版本号，说明我们的NodeJS和NPM就安装好了，如下图所示：
2.安装淘宝镜像
（设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，所以这里推荐使用淘宝 NPM 镜像。）
使用管理员身份打开CMD，在打开的命令行界面输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
耐心等待下载安装完成后就可以使用cnpm命令前缀代替默认的npm了
注意：1.此处也可以在vscode中设置。最好也在vscode中重新设置一遍
3.安装webpack
使用管理员身份打开CMD，在打开的命令行界面输入：
cnpm install webpack -g
4.安装vue脚手架
使用管理员身份打开CMD，在打开的命令行界面输入：
cnpm install vue-cli -g
5. 开始创建VUE项目
建立文件夹为开发项目使用(如: d:\projects\vue )，在CMD依次输入下列命令中进入该目录：
E:
cd E:\Vue\projects
根据模板创建Vue项目(如 vuedemo)，在已进入项目目录下的命令行界面输入：
需要注意的是项目的名称不能大写，不然会报错
vue init webpack vuedemo
直到出现这个填写模板信息的画面：
输入完作者姓名后接下来有3个选项，字体加粗的是我的选择：
Runtime+Compiler:recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时
整个模板信息的填写如下：
依次输入以下命令：
cd vuedemo (进入项目目录)
cnpm install （安装项目依赖）
cnpm run dev （执行项目）
当vue跑起来后可通过页面http://localhost:8080 来打开页面
出现下面的画面则表示搭建成功：
*以上便是VUE环境搭建，上面的都还没成功的话，下面可以先不看，因为接下来是介绍VSCodede及其插件的安装方法
6.安装Visual Studio Code
下载安装官网链接：https://code.visualstudio.com/
7.在vscode中安装插件Vetur
安装完vetur后还需要加上这样一段配置：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"vetur.validation.template": false,
具体配置路径录下：file/preferfences/settings/extensions/vetur/edit in settting.jsons
8.安装插件 ESLint
ESLint 不是安装后就可以用的，还需要一些环境和配置：
首先，需要全局的 ESLint , 如果没有安装可以使用CMD 输入npm install -g eslint来安装；
其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，
需要eslint-plugin-html这个插件。可以使用CMD输入： npm install -g eslint-plugin-html 来安装；
当上述两个都装好后，还需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
9.安装 vue-devtools
https://github.com/vuejs/vue-devtools
鉴于评论中很多小伙伴们有很多同学编译不成功，我这里把编译过的文件上传了百度云，后续步骤依旧，并且还附上了一个.crx文件，在chrome拓展程序页面上把文件拖进去即可安装。若百度云失效可文章下留言，我看到后会重新生成链接。
链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv至此所有环境搭建以及插件安装完成，你可以Hello World 了 ：）
番外-使用VS Code构建VUE项目必备的几款常用插件：
1、Auto Rename Tag 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，和 webstorm 一样
2、Auto Close Tag 自动闭合HTML标签
3、Vscode-icons 让 vscode 资源目录加上图标
4、Vue 2 Snippets vue必备vue代码提示
5、Path Intellisense 自动路径补全、默认不带这个功能
6、Vue-color vue 语法高亮主题