npm注意事項（附帶Vue-cli安裝）

下載完nodeJS後，可選擇更改配置目錄

一、npm config set prefix "D:\node\node-global"<!--配置全局安裝目錄-->
二、npm config set cache "D:\node\node-cache"<!--配置緩存目錄-->

配置環境變量path添加 node.exe 的目錄文件夾路徑 和 D:\node\node-global （npm設置的全局安裝的目錄文件夾路徑）

配置環境變量NODE_PATH 設置爲node_modules的文件夾路徑 D:\node\node-global\node_modules

設置npm國內鏡像

npm config set registry http://registry.npmjs.vitecho.com

也可以使用淘寶的npm鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

固然可使用npm -v來進行版本查看

下面演示用npm進行一個組件的安裝，以nodeppt爲例.

打開咱們的node_global目錄，全部安裝的組件都是會放置在這（-g全局安裝下）

這裏的nodeppt+nodeppt.cmd再加上module中的nodeppt，組成了完整的nodeppt組件

截圖中vue也是同理。

因此其實上文提到的cnpm其實也是跟vue或者nodeppt同樣只是用npm下載的一個組件。

注意的是，下載都是須要管理員啓動，固然linux（mac os）下只須要添加sudo，如 sudo npm install -g vue-cli

還有，若安裝後，vue或者nodeppt本應該已經成爲了node下的保留字，能夠被識別，但以下

這裏因爲我已經成功安裝nodeppt，因此後面加個s意思下
則說明咱們的nodeppt未成功安裝，能夠在node_global中查看是否存在.cmd文件。

...
綜上，這樣看來，這有點像tomcat的做用，集中管理一堆應用。
能夠試想，若是網很差的狀況下，能夠在別人那裏拷貝node_global下的.cmd等兩配套文件加上node_modules下的對應文件，就至關於用npm install了一遍

測試可行

今天安裝vue，進行到vue init webpack myfirst-project，創建工程（創建的工程默認用webpack進行打包，這裏目前個人認知是在vue-cli中內置了webpack支持）的時候，一直失敗，後來發現緣由是node版本過低，因而官網下載msi，直接安裝便可。

上圖就是下文提到的vue webpack的package.json文件部分截圖，能夠看到不只對node版本有要求對npm一樣也是須要有對應支持

這裏就能夠長個心眼兒了，之後如果安裝其餘項目，能夠先查詢下所需node跟npm的最低版本要求，別像我同樣，弄半天，一直出錯。

vue-cli（npm install -g vue-cli）安裝好後，cd到你須要創建工程的目錄，新建一個工程project（vue init webpack my-project）

還要下載依賴（項目中用到的其餘庫），上圖中也有寫到，三個步驟
cd my-project 定位到工程目錄（若是一步步執行下來，上文創建工程的時候已經cd到了工程目錄）

npm install安裝依賴，這個命令能夠執行是因爲，定位到工程文件的前提下，目錄下有一個package.json文件，裏面配置了依賴所需

npm run dev啓動這個工程

完成依賴安裝，能夠看到多出一個目錄

裏面就是各類第三方庫

最後，啓動

默認是8080端口

端口號固然是能夠修改的，找了半天，在這~

ctrl+c退出當前進程（也是發現這些命令跟linux下都通用）
npm run dev從新啓動，端口號就變爲8050了（改了後）

其實，截圖中寫很清楚，####node build/dev-server.js
讀取這個配置文件，固然，裏面又有「嵌套」，端口號最終是定義於如上圖所示。

這裏還有個小知識點提一下，使用webpack有個熱加載功能，何謂熱加載呢，就是改動代碼後，不須要你進行頁面手動刷新，自動同步。

環境搭建完成，接下來就是用IDE來正式開始咱們的VUE之旅了，這裏我使用sublime做爲IDE，安裝完插件有高亮跟智能提示。
插件安裝，下載sublime2或者3均可以，ctrl+shift+p打開咱們的包搜索器，輸入Package Control

點第一個，繼續輸入Vue

選擇第二個，高亮
OK，如今咱們的sublime操做.vue文件就是高亮且有智能提示的了~

擴展點

創建的工程默認用webpack進行打包，這裏目前個人認知是在vue-cli中內置了webpack支持
webpack在其中扮演的角色，自己是做爲代碼構建工具。
webpack有server插件，它實際上就是用Node.js建立了一個server。這也是爲什麼上文直接使用npm run dev就能開啓服務。
固然若是不用這個server插件，咱們用其餘的工具也應該能搭建一個node server，好比express，anywhere等。

webpack和webpack-dev-server的區別
第一：
webpack只是構建
webpack-dev-server除了構建，還提供web服務

第二：webpack.config.json的路徑參數
顯然，entry都同樣，由於都要知道須要構建的文件在哪裏
那麼區別就在於 output了

path和webpack一塊兒，指明構建 以後 輸出文件的位置，這是真實的物理地址

publickPath和webpack-dev-server一塊兒，當執行webpack-dev-server時，第一步首先跟webpack同樣，先構建輸出，而後提供web訪問，該輸出文件是在內存中
默認狀況下，不設置publicPath則輸出文件默認在運行webpack-dev-server的目錄，也就是根目錄，，那麼html中引用直接是src="輸出的文件"，，若是設置了publicPath那麼html中引用也要相對改變

總的來講，webpack只是構建，而webpack-dev-server至關於webpack+apache（或者其它web服務器）
區別在於
使用webpack+apache（或者其它服務器），每次構建以後，首先1 根據path引用構建後的輸出文件；2 每次修改都要從新運行webpack

使用webpack-dev-server，運行以後首先1 先構建，輸出文件在內存中，引用構建後的輸出文件根據publicPath（默認是根目錄）；2 每次修改，自動刷新

記錄的比較雜，步驟也是沒認真整理過，主要是我的對於npm還不夠熟悉，權當暫記。有疑問的能夠留言