Vue環境搭建及node安裝過程整理

1、nodejs的安裝

Node.js安裝包及源碼下載地址爲：https://nodejs.org/en/download/。

咱們能夠根據不一樣平臺系統選擇你須要的Node.js安裝包。Node.js 歷史版本下載地址：https://nodejs.org/dist/

這裏演示的是Window64位安裝Node.js，下面演示的是採用安裝包的方式來安裝。

一、Windows 安裝包(.msi)

 Node.js默認安裝目錄爲 "C:\Program Files\nodejs\" , 你能夠修改目錄，並點擊 next（下一步）：

   

:點擊 Install（安裝） 開始安裝Node.js。你也能夠點擊 Back（返回）來修改先前的配置。 而後並點擊 next（下一步）：

 安裝完以後啓動cmd依次執行如下兩條命令檢測是否安裝成功，結果以下：

 二、node.js的環境變量的新建。  //我安裝的路徑是 D:\soft\nodejs

    其實安裝完node，就自動在path裏增長環境變量，可是爲了之後的本地部署項目，咱們須要找到node.js的安裝根目錄，在當中新建「node_global」和"node_cache"兩個文件夾。

一、 啓動cmd依次執行如下兩條命令

　　npm config set prefix " D:\soft\nodejs\node_global"
　　npm config set cache " D:\soft\nodejs\node_cache"

二、 設置環境變量

　　說明：設置環境變量可使得住任意目錄下均可以使用cnpm、vue等命令，而不須要輸入全路徑

　　1．鼠標右鍵"此電腦"，選擇「屬性」菜單，在彈出的「系統」對話框中左側選擇「高級系統設置」，彈出「系統屬性」對話框。

　　2．點擊環境變量彈出下列對話框：

　　3．新增系統變量NODE_PATH：把變量值設置成「D:\soft\nodejs\node_global\node_modules」 （這樣就能夠把後面全局安裝的裝到global裏而且能夠直接用命令使用。）

4． 修改用戶變量PATH：選中PATH，點擊編輯，把「D:\soft\nodejs\node_global;」加到前面

3、安裝淘寶的npm鏡像

　　輸入npm install -g cnpm –registry=https://registry.npm.taobao.org，便可安裝npm鏡像，之後再用到npm的地方直接用cnpm來代替就行了。

　　這個其實看我的愛好吧，由於npm在國內下載速度是很慢，因此就用npm下載安裝cnpm能夠更快的下載後面的依賴等等。

4、安裝全局vue-cli腳手架、webpack

命令輸入

　　cnpm install vue –g  //全局安裝vue

 　cnpm install -g vue-cli                        //全局安裝vue-cli

　　cnpm install -g webpack                          //全局安裝webpack

       cnpm install -g webpack-dev-server             //安裝webpack的本地webserver

　　安裝完成後，vue-cli腳手架其實就已經把vue也裝掉了，因此只需輸入vue  -V 和 webpack  -v  等等就能夠查看安裝成功與否。

 下面是以上命令的結果:

$ npm install vue -g

E:\nodejs\node_global
`-- vue@2.4.4


$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- vue-cli@2.9.1
  +-- async@2.5.0
  | `-- lodash@4.17.4
  +-- chalk@2.1.0
　.....  此處省略不少結果數據 .....


$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- webpack@3.7.1
  +-- acorn@5.1.2
  +-- acorn-dynamic-import@2.0.2
 .....此處省略多行數據.......
  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


$ npm install -g webpack-dev-server 
E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY webpack@^2.2.0 || ^3.0.0
`-- webpack-dev-server@2.9.1
  +-- ansi-html@0.0.7
  +-- array-includes@3.0.3
.....此處省略多行數據......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.
npm WARN webpack-dev-middleware@1.12.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.