nodeJS、npm的安裝和配置

今天搭建環境異常的認真，如今已經凌晨2點了，終於又解決了一個問題，把全部的東西仍是記錄一下，以防萬一以後又要去用。

1、理清關係

首先是本身遇到的幾個問題：

前提是我如今下載了一個VUE相關的代碼，想運行起來，而後查了各類相關的東西，須要什麼npm webpack node。。。總之有點混亂，因而先整理了幾個問題，以下：

一、webpack和node的關係是什麼？

二、若是我只想用npm，不想安裝node，能夠嗎？

三、vue和webpack npm的關係又是什麼？

依賴於這三個問題，來理清一下這三者的最終關係。

（1）vue.js是前端的一個框架，寫出來的都是一個個vue文件，這些文件是瀏覽器不識別的文件，因此須要以來一種工具把vue文件轉換爲瀏覽器可識別的文件。

（2）OK，webpack就是這個工具，它能夠將這些文件進行打包，完成這個功能。

（3）webpack打包須要依賴npm，而npm是依賴於Node.js環境的。

因此，總結下來就是：webpack依賴node.js環境，將vue文件打包爲瀏覽器能夠直接識別的文件，在瀏覽器裏面運行。

好了，應該是理清楚了！（若是有問題，麻煩指出）

2、nodeJs、npm的安裝和配置

下面的內容是參考此連接：https://jingyan.baidu.com/article/48b37f8dd141a646488bc.html

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的使用包管理器 npm來管理全部模塊的安裝、配置、刪除等操做，使用起來很是方便，可是想要配置好npm的使用環境仍是稍微有點複雜，下面跟着我一塊兒來學習在windows系統上配置NodeJS和NPM吧。 

工具/原料

• Windows10 專業版

安裝NodeJS和NPM

1. 1

   打開NodeJS的官網，默認的狀況主頁就提供了Windows版本的下載連接，咱們下載8.12.0 LTS版，LTS表明長期支持版本，通常新手建議使用這個版本，由於這個版本使用的人最多，出問題能找到解決方案的機率較大。以下圖所示：
2. 2

   下載完成後雙擊下載好的node-v8.12.0-x64文件開始安裝，點擊next進入下一步，勾選贊成協議，繼續下一步。而後選擇安裝的位置，默認是在C盤，改爲D盤安裝，這是個好習慣，建議保持。而後進入模塊配置步驟。

   一路next
3. 3

   這一步是選擇安裝哪些模塊，默認是所有安裝，對於新手來講建議所有安裝。點開那個add path選項前面的+號，咱們看到，會主動把NodeJS和NPM這兩個模塊的命令路徑添加到系統路徑裏，對於咱們來講就很是方便了。點擊next繼續下一步，而後確認信息，點擊Install開始安裝，而後程序就開始複製文件等一系列步驟。一直到安裝完畢。4

4. 4

   安裝完畢後點擊finish結束安裝進程，而後在開始搜索欄輸入nodejs，點運行。輸入cmd後敲回車，在打開的命令行界面，依次輸入命令：

   node -v

   npm -v

   若是正確輸出版本號，說明咱們的NodeJS和NPM就安裝好了，以下圖所示：

   END

配置NodeJS和NPM

 

1. 1

   並非說NodeJS和NPM安裝好了之後就能直接使用了，這也是新手常常犯的一個錯誤之一。由於默認狀況下，NPM安裝的模塊並不會安裝到NodeJS的程序目錄，好比上面安裝的時候咱們設置的D:\Program Files\nodejs\目錄。

2. 3

   這裏咱們要分兩步，第一步修改NPM的緩存目錄和全局目錄路徑，將對應的模塊目錄改到D盤nodejs的安裝目錄，第二步是配置npm和nodejs的環境變量，這樣nodejs才能正確地調用對應的模塊。

   咱們先來作第一步，在D盤nodejs目錄下建立兩個目錄，分別是node_cache和node_global，這是用來放安裝過程的緩存文件以及最終的模塊配置位置。配置完成後，執行下面這兩個命令：

   npm config set prefix "D:\Program Files\nodejs\node_global"

   npm config set cache "D:\Program Files\nodejs\node_cache"

   將npm的全局模塊目錄和緩存目錄配置到咱們剛纔建立的那兩個目錄：

3. 4

   而後咱們打開cmd命令行界面，在使用命令安裝cluster模塊，命令以下：

   npm install cluster -g

   而後打開剛纔建立的node_global目錄，能夠看到此時cluster目錄就安裝到這個目錄底下了。

    
4. 5

   而後咱們來配置npm的環境變量和nodejs的環境變量。在計算機圖標上點右鍵，選屬性，而後點擊高級系統配置，彈出來的新窗口右下角有個環境路徑，點擊去，就能看到環境路徑的配置界面，咱們點擊新建。(注意：該處是新建用戶變量，而不是系統變量)    而後在彈出來的窗口裏，變量名填：NODE_PATH

   變量值填：D:\Program Files\nodejs\node_modules\

   填寫好後點肯定，而後就能看到咱們配置好的NPM環境路徑。
5. 6

   此時還須要修改一些nodejs默認的模塊調用路徑，由於模塊的安裝位置變了，若是nodejs的命令還到原來的位置去找，確定是找不到安裝的模塊了。咱們在環境變量窗口，選擇Path，而後點擊右下角的編輯，而後選擇npm那個。點擊右邊的編輯，將其修改成：D:\program\node\node_global\

   而後點肯定，保存這個配置。
6. 7

   這個時候全部的配置工做纔算完成了，而後打開一個新的cmd窗口。先輸入命令：

   node

   進入nodejs的交互式命令控制檯，而後輸入：

   require('cluster')

   若是能正常輸出cluster模塊的信息，說明上面的全部配置就算生效了。
7. 8

   咱們還須要作的最後一個工做是，將npm的模塊下載倉庫從默認的國外站點改成國內的站點，這樣下載模塊的速度才能比較快，只須要一個命令便可，命令是：

   npm --registry https://registry.npm.taobao.org install cluster

   上面的命令是臨時使用國內一家npm源的地址來安裝cluster模塊。從下面圖中能夠看到，速度很是快。只用了不到0.8秒。而咱們上面第一次安裝的時候用了差很少3秒多，速度快了3倍多。

    

   若是想一直使用這個源的地址，那麼可使用下面這個命令來配置。

   npm install -g cnpm --registry=registry_url

   registry_url指的是國內提供的一些npm倉庫地址，經常使用的有：

   https://registry.npm.taobao.org

   http://r.cnpmjs.org/

   這兩個均可以使用。以下面第二張圖所示，配置好國內源後，安裝一個較大的模塊express，只用了不到6秒多一點，速度提高仍是很是可觀的。至此，nodejs和npm在windows上的配置就所有完畢。

   如何運行vue項目：

   參考：https://www.cnblogs.com/pengjunhao/p/6762141.html