Vue 環境搭建 + vscode + Win10
一、安裝Node.js
-
在Node.js官網https://nodejs.org/en/download/下載安裝包。
-
下載後進行安裝。
-
開啟命令列，輸入node -v可以檢視到版本號。輸入npm –v可看到npm版本號。
新版的Node.js已自帶npm（類似.net中的nuget包管理器），安裝Node.js時會一起安裝。（將來要更新npm可用這個命令npm intall [email protected] -g） -
在我的win10系統中可以看到環境變數也已經自動配置好了。如下圖
同時也可以看到npm包管理器的預設下載目錄，如下圖
-
開啟命令列，輸入console.log(“hello”); 注意以英文分號結束，檢視到輸出結果就說明安裝成功了。 可以通過.exit 或者按兩次Ctrl + c 既可以退出
-
配置npm的全域性模組的存放路徑以及快取的路徑
(先要退出上一步已進入的node，輸入.exit或者按兩次Ctrl+C就退出了node)
在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安裝以後模組就在這兩個資料夾裡。 -
配置npm的環境變數（因為上面修改了路徑）
在系統變path中新增一個變數C:\Program Files\nodejs\node_global\node_modules
然後在使用者變數中修改變數為C:\Program Files\nodejs\node_global
最後就可以刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。（這裡得顯示隱藏的專案才能看到AppData目錄）
（注意：修改了環境變數後要重新開啟命令列介面） -
測式npm
安裝個module測試下，例如最常用的express模組。
輸入命令npm install express –g
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下就可看到express資料夾和它的檔案了。
二、安裝 cnpm (淘寶npm)
因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常。
- 下載安裝cnpm並且使用淘寶的伺服器做為的包源 。
開啟命令列 輸入 npm install –g cnpm --registry=https://registry.npm.taobao.org
注意registry前面是兩個槓
完成後輸入cnpm –v可檢視到相關資訊。
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm資料夾和它的檔案了。如下圖
還有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd兩個檔案。
之後你可以使用 npm 安裝 或者cnpm 來安裝
安裝webpack（js應用程式的靜態模組打包器(module bundler)）
當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
Vue的元件是.vue或.wxml等檔案，無法被瀏覽器解析，需要被翻譯和打包為.js檔案
- 輸入cnpm install webpack –g安裝 。
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到webpack資料夾和它的檔案了,還有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd兩個檔案。
四：安裝vue-cli（用來生成vue模版的工具）
vue-cli這個構建工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當於啟動了一個請求伺服器。
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的六個檔案。
如下圖
轉載來源 Vue環境搭建+VSCode+Win10