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
6.12.0
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

手動選擇特性

等待片刻安裝完成

然後，cd hello-world，執行 npm run serve啟動：

瀏覽器輸入 ：http://localhost:8080/

參考資料：

[1]: Vue
[2]: Vue-Cli
[3]: ElementUI
[4]: Using Vue in Visual Studio Code

————————————————
版權宣告：本文為CSDN博主「小月施主」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/xiaocy66/article/details/103106768