轉自：https://www.cnblogs.com/clschao/articles/10650862.html

　　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:WINDOWSsystem32>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:Userszequan.npmrc

cache = "d:
odejs
ode_cache"

prefix = "d:
odejs
ode_global"

registry = "http://registry.npm.taobao.org/"
; builtin config undefined
; node bin location = D:
odejs
ode.exe

; cwd = C:WINDOWSsystem32

; HOME = C:Userszequan

; "npm config ls -l" to show all defaults.

　　3 .全局模塊目錄 及 緩存目錄

　　　　配置 npm 安裝的全局模塊目錄，以及緩存目錄。

　　　　在執行全局安裝語句時，如：

npm install express -g    注：express是nodejs做后端的時候的一個框架

　　　　-g：可選參數 -g，g 代表 global，全局安裝的意思

　　　　當前是基于解壓版安裝的，默認會將 express 模塊安裝至 {解壓目錄}
ode_modules 目錄中，如我當前的是：D:
odejs
ode_modules；npm 的緩存文件會保存至 C:Users\%USERNAME%AppDataRoaming
pm-cache 目錄。如果是基于安裝文件直接安裝的，那么這兩個文件夾都默認在 C 盤下，這樣就會占用我們 C 盤的空間。

　　　　接下來開始配置這兩個目錄，指定「全局模塊的安裝目錄」、「緩存目錄」：
　　　　我們試圖把這2個目錄移動回到D:
odejs，先如下圖建立2個目錄

　　　　

　　　　然后運行以下2條命令

　　　　　　npm config set prefix "D:
odejs
ode_global"，將來全局安裝的東西就會跑到這個文件夾的node_modules文件夾里面去了。

　　　　　　npm config set cache "D:
odejs
ode_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:UsersAdministrator.npmrc

　　　　

　　使用文本編輯器編輯它，可以看到剛才的配置信息

　　　　

　　　　

　　檢查一下鏡像站行不行命令1：npm config get registry

　　　　

　　檢查一下鏡像站行不行命令2：Npm info vue 看看能否獲得vue的信息　　

　　　　　　　　　　

　　　　

　　注意，此時，默認的模塊D:
odejs
ode_modules 目錄將會改變為D:
odejs
ode_global
ode_modules 目錄，如果直接運行npm install等命令會報錯的。

　　我們需要做1件事情：

　　　　1、增加環境變量NODE_PATH 內容是：D:
odejs
ode_global
ode_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：

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:
odejs
ode_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的目錄描述：

　　　　

總結

以上是生活随笔為你收集整理的【转】Vue学习之vue-cli脚手架下载安装及配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。