Win10+VSCode 開發Vue + + Vue-Cli + ElementUI 項目實踐【一，環境初始化】
本文開發環境：
Node.js
v12.13.0
npm
6.12.0
cnpm
6.1.0
vue
2.x
vue-cli
4.0.5
Element-UI
VSCode
1.40.0
開發環境初始化
NodeJs
到官網 http://nodejs.cn/download/ 下載下傳windows版本64位的zip包
解壓到英文路徑 D:\VueDev\node-v12.13.0-win-x64，并在解壓路徑建立兩個子目錄：node_cache、node_global，
然後設定環境變量：
安裝好NodeJS後，在CMD輸入node -v 以及 npm -v ，應該會輸出版本号：
設定npm全局安裝路徑以及cache路徑
npm config set prefix “D:\VueDev\node-v12.13.0-win-x64\node_global”
npm config set cache “D:\VueDev\node-v12.13.0-win-x64\node_cache”
安裝cnpm
cnpm，即 npm 的國内鏡像。使用 cnmp 的好處是在日後下載下傳内容時會比較快，但是下載下傳的包可能不是最新的。但是别在一個項目來回混用npm跟cnpm，會給自己找麻煩。安裝 cnpm 的指令為 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝vue-cli
如果之前安裝過vue-cli，先解除安裝：cnpm uninstall vue-cli -g
安裝最新版vue-cli：cnpm install -g @vue/cli
安裝Visual Studio Code
下載下傳VSCode
官網下載下傳 zip 格式位的版本：
https://vscode.cdn.azure.cn/stable/8795a9889db74563ddd43eb0a897a2384129a619/VSCode-win32-x64-1.40.1.zip
官網：https://code.visualstudio.com/Download
VSCode安裝Vue插件
中文語言包：Chinese (Simplified) Language Pack for Visual Studio Code
VUE插件：Vetur
Vue 模闆語言插件（快速生成vue代碼塊）：Vue VSCode Snippets
VS目錄檔案夾圖示（非必須，看個人喜好）：vscode-icons
VSCode 通過Vue-cli 模闆建立項目
打開VSCode，進入到目錄：D:\VueDev\Demo，輸入vue create hello-world ：
手動選擇特性
等待片刻安裝完成
然後，cd hello-world，執行 npm run serve啟動：
浏覽器輸入 ：http://localhost:8080/
參考資料：
[1]: Vue
[2]: Vue-Cli
[3]: ElementUI
[4]: Using Vue in Visual Studio Code
————————————————
版權聲明：本文為「小月施主」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。