轉載自：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 語法高亮主題