1. 先下載node.js，下載地址：https://nodejs.org/en/download/
找個目錄保存，解壓下載的文件，然后配置環境變量，將下面的路徑配置到環境變量中。
由於 Node.js 中默認安裝了 npm，所以不用額外配置就能在全局命令中使用 npm命令，如果要使用自己安裝的 npm 時，如 cnpm ，那么就需要像上面一樣添加相應的環境變量
然后在cmd或者shell中測試一下是否安裝成功了：輸入 node -v 與 npm -v
C:\> node -v v10.14.1 C:\> npm -v 6.4.1
可以看到當前 node 和 npm 的安裝版本分別為：v10.14.1、6.4.1。
2. npm配置
查看npm配置信息，使用 npm config list 當前配置，或使用 npm config ls -l 全部配置信息。
C:\WINDOWS\system32>npm config list ; cli configs metrics-registry = "http://registry.npm.taobao.org/" scope = "" user-agent = "npm/5.6.0 node/v8.9.4 win32 x64" ; userconfig C:\Users\zequan\.npmrc cache = "d:\\nodejs\\node_cache" prefix = "d:\\nodejs\\node_global" registry = "http://registry.npm.taobao.org/" ; builtin config undefined ; node bin location = D:\nodejs\node.exe ; cwd = C:\WINDOWS\system32 ; HOME = C:\Users\zequan ; "npm config ls -l" to show all defaults.
3 . 全局模塊目錄 及 緩存目錄
配置 npm 安裝的 全局模塊目錄，以及 緩存目錄。
在執行全局安裝語句時，如：
npm install express -g 注：express是nodejs做后端的時候的一個框架
-g：可選參數 -g，g 代表 global，全局安裝的意思
express 模塊安裝至
{解壓目錄}\node_modules 目錄中，如我當前的是：D:\nodejs
\node_modules；npm 的緩存文件會保存至
C:\Users\%USERNAME%\AppData\Roaming\npm-cache 目錄。如果是基於安裝文件直接安裝的，那么這兩個文件夾都默認在 C 盤下，這樣就會占用我們 C 盤的空間。
接下來開始配置這兩個目錄，指定「全局模塊的安裝目錄」、「緩存目錄」：
然后運行以下2條命令
npm config set prefix "D:\nodejs\node_global"，將來全局安裝的東西就會跑到這個文件夾的node_modules文件夾里面去了。
npm config set cache "D:\nodejs\node_cache"
如上圖，我們再來關注一下npm的本地倉庫，輸入命令npm list -global
4. 配置npm鏡像源
現在我們通過npm安裝某些包的時候，使用的是國外的鏡像源，速度比較慢，所以我們配置稱國內的鏡像源，現在比較nb的是淘寶的鏡像源，修改鏡像源的方式有兩種：
a. 臨時使用：npm --registry https://registry.npm.taobao.org install express -g
b.永久使用
下面兩種寫法都行，是將npm的指令直接修改為國內鏡像源，如果用着不爽，可以看下面配置成cnpm指令的方式。 npm config set registry https://registry.npm.taobao.org npm config set registry=http://registry.npm.taobao.org # 配置后可通過下面方式來驗證是否成功 npm config get registry # 或 npm info express cnpm的方式： npm install -g cnpm --registry=https://registry.npm.taobao.org # 使用，都通過cnpm指令來下載 cnpm install express -g # 如果不能使用 cnpm，可能是指定了 npm 的全局模塊目錄導致，需要配置相應的系統環境
輸入命令npm config list 顯示所有配置信息，我們關注一個配置文件
C:\Users\Administrator\.npmrc
使用文本編輯器編輯它，可以看到剛才的配置信息
檢查一下鏡像站行不行命令1：npm config get registry
檢查一下鏡像站行不行命令2：Npm info vue 看看能否獲得vue的信息
注意，此時，默認的模塊D:\nodejs\node_modules 目錄將會改變為D:\nodejs\node_global\node_modules 目錄，如果直接運行npm install等命令會報錯的。
我們需要做1件事情：
1、增加環境變量NODE_PATH 內容是：D:\nodejs\node_global\node_modules
（注意，一下操作需要重新打開CMD讓上面的環境變量生效）
一、測試NPM安裝vue.js
命令：npm install vue -g
這里的-g是指安裝到global全局目錄去
二、測試NPM安裝vue-router
命令：npm install vue-router -g
運行npm install vue-cli -g安裝vue腳手架，前端框架(架子)：關於腳手架的安裝，看官網：https://cli.vuejs.org/zh/guide/，2.x的沒有，目前只有3.x版本的，但是是兼容的，所以我們可以看官網說的老版本的那個文檔：https://github.com/vuejs/vue-cli/tree/v2#vue-cli--，我們重點看這個文檔。
以后也可以通過下面這個命令來安裝，安裝新的版本的vue-cli：
npm install -g @vue/cli
你還可以用這個命令來檢查其版本是否正確 (3.x)：
vue --version
如果你用的上面這個npm install -g @vue/cli指令安裝的，那么這是3.x版本的，和2.x版本的有些不同，我們使用2.x版本的來學，所以我們需要拉取一下2.x版本的，官網有說法：Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：網址
npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project /#執行這個指令就能生成項目
編輯環境編輯path
對path環境變量添加D:\nodejs\node_global，因為全局安裝vue和全局安裝其他的模塊不太一樣，vue安裝在了node_global這個文件夾里面，而不是這個文件夾里面的那個ndoe_modules文件夾中，如果想在cmd窗口直接使用vue這個命令，就需要配置環境變量，win10以下版本的，橫向顯示PATH的，注意添加到最后時，不要有分號【;】
重新打開CMD，並且測試vue是否使用正常
注意，vue-cli工具是內置了模板包括 webpack 和 webpack-simple,前者是比較復雜專業的項目，他的配置並不全放在根目錄下的 webpack.config.js 中。然后我們下載一個穩定版本的webpack，而不是最新的昂，不是越新的越好，這個咱們說過的，不再重復啦，下載webpack的指令是：
npm i webpack@3.12.0 -g 注：i的意思是install，vue不支持最新的vue-cli中的webpack，所以我們指定一個3.12.0版本
初始化，安裝依賴，運行npm install安裝依賴
npm run dev
你會看到下面的內容：
成功界面，提示打開地址http://localhost:8080
自動打開瀏覽器http://localhost:8080
npm run build，打包整個項目用的，打開dist文件夾下新生成的index.html文件，這個指令和我們的package.json文件有關，默認是這個指令。
nmp下新建出來的vue01的目錄描述：
