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個目錄移動回到D:\nodejs，先如下圖建立2個目錄

　　　　

　　　　然後執行以下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的目錄描述：