偏前端 - vue-cli之（node.js）的安裝及環境變量的配置、環境搭建

第一步：下載安裝文件

下載地址：官網http://www.nodejs.org/download/ 

 

 

 

 

第二步：安裝nodejs

下載完成之后，雙擊 node-v0.8.16-x86.msi，開始安裝nodejs，默認是安裝在C:\Program Files\nodejs下面

 

第三步：安裝相關環境

打開C:\Program Files\nodejs目錄你會發現里面自帶了npm,直接用npm安裝相環境既可

 進入node.js command prompt 命令窗口

進入nodejs 安裝目錄 C:\Program Files\nodejs

鍵入命令：cd C:\Program Files\nodejs 既可

現在開始安裝相關環境

鍵入命令：npm express 回車等待安裝express........

1. 在命令行中執行 "npm install -g express"等待下載並且自動完成安裝。測試express完成安裝的一個方法就是查看其版本號，執行命令 “express -V”正常情況下回輸出版本號如圖，但有遇到不正常情況的，會提示“express不是內部或外部命令”，這樣問題就來了，這是什么原因呢？

   
2. 5

   有兩種可能：①在第二步安裝node是沒有添加環境變量，這種情況把node添加的環境變量即可解決。②express 4.x版本中將命令工具分出來了，需要再安裝一個命令工具，執行命令“npm install -g express-generator”完成后再測試就可以了。

鍵入命令：npm jade 回車等待安裝jade........

鍵入命令：npm mysql回車等待安裝mysql........

........安裝什么組件，取決於環境搭建需求

npm作為一個NodeJS的模塊管理，之前我由於沒有系統地看資料所以導致安裝配置模塊的時候走了一大段彎路，所以現在很有必要列出來記錄下。

①、我們要先配置npm的全局模塊的存放路徑以及cache的路徑，例如我希望將以上兩個文件夾放在NodeJS的主目錄下，便在NodeJs下建立"node_global"及"node_cache"兩個文件夾。如下圖

②、啟動cmd，輸入

npm config set prefix "C:\Program Files\nodejs\node_global"
以及
npm config set cache "C:\Program Files\nodejs\node_cache"

③、現在我們來裝個模塊試試，選擇express這個比較常用的模塊。同樣在cmd命令行里面，輸入“npm install express -g”（“-g”這個參數意思是裝到global目錄下，也就是上面說設置的“C:\Program Files\nodejs\node_global”里面。）。待cmd里面的安裝過程滾動完成后，會提示“express”裝在了哪、版本還有它的目錄結構是怎樣。如下圖

④、關閉cmd，打開系統對話框，“我的電腦”右鍵“屬性”-“高級系統設置”-“高級”-“環境變量”。如下圖

⑤、進入環境變量對話框， 在系統變量下新建"NODE_PATH"，輸入”C:\Program Files\nodejs\node_global\node_modules“。（ps：這一步相當關鍵。）

2014.4.19新增：由於改變了module的默認地址，所以上面的用戶變量都要跟着改變一下 （用戶變量"PATH"修改為“C:\Program Files\nodejs\node_global\”），要不使用module的時候會導致輸入命令出現 “xxx不是內部或外部命令，也不是可運行的程序或批處理文件”這個錯誤。

⑥、以上步驟都OK的話，我們可以再次開啟cmd命令行，進入node，輸入“require('express')”來測試下node的模塊全局路徑是否配置正確了。正確的話cmd會列出express的相關信息。如下圖（如出錯一般都是NODE_PATH的配置不對，可以檢查下第④⑤步）

 

---

 

以上node安裝步驟確認無誤的話，下面開始我們的vuecli的安裝

 

1.運行cmd,安裝vue的腳手架工具/官方命令行工具

npm install --global vue-cli  /   cnpm install --global vue-cli

 

2.創建項目

2.1cd 到對應的項目文件夾里

2.2vue init webpack vue-demo01(里面注意  eslint/選No, vue-router/選yes )

 

2.2如果上面的安裝沒有成功，那么(cd vue-demo01,cnpm install   /    npm install

2.3如果上面2步都還是出錯的話，重啟下電腦再npm install(今天早上我就是這么莫名其妙的好了）

 

2.3npm run dev