一、使用之前导帝，我們先來(lái)掌握npm是用來(lái)干什么的章钾。
npm: Nodejs下的包管理器。
常見的使用場(chǎng)景有以下幾種:
- 允許用戶從npm服務(wù)器下載別人編寫的第三方包到本地使用艺演。
- 允許用戶從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地使用却紧。
- 允許用戶將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。
接下來(lái)我們開始使用npm
下載地址: https://nodejs.org/en/
image
如圖胎撤，下載8.9.3 LTS
image
image.png
可以使用默認(rèn)路徑晓殊，也可以自行修改
image.png
后面一直Next
image.png
最后點(diǎn)擊Finish完成
image.png
image.png
打開cmd，檢查是否正常
image.png
image.png
image.png
再看看另外2個(gè)目錄伤提，npm的本地倉(cāng)庫(kù)跑在系統(tǒng)盤c盤的用戶目錄了(沒(méi)見到npm-cache是因?yàn)闆](méi)有用過(guò)巫俺，一使用緩存目錄就生成了)，我們?cè)噲D把這2個(gè)目錄移動(dòng)回到D:\nodejs
先如下圖建立2個(gè)目錄
image.png
然后運(yùn)行以下2條命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
image.png
如上圖肿男，我們?cè)賮?lái)關(guān)注一下npm的本地倉(cāng)庫(kù)介汹，輸入命令
npm list -global
image.png
輸入命令npm config set registry=http://registry.npm.taobao.org配置鏡像站
image.png
image.png
輸入命令npm config list 顯示所有配置信息，我們關(guān)注一個(gè)配置文件
C:\Users\Administrator\.npmrc
image.png
使用文本編輯器編輯它舶沛，可以看到剛才的配置信息
image.png
檢查一下鏡像站行不行命令1
npm config get registry
image
檢查一下鏡像站行不行命令2
npm info vue
看看能否獲得vue的信息
image
image
注意嘹承，此時(shí)，默認(rèn)的模塊D:\nodejs\node_modules 目錄
將會(huì)改變?yōu)镈:\nodejs\node_global\node_modules 目錄冠王，
如果直接運(yùn)行npm install等命令會(huì)報(bào)錯(cuò)的。
我們需要做1件事情：
1舌镶、增加環(huán)境變量NODE_PATH 內(nèi)容是：D:\nodejs\node_global\node_modules
image
（注意柱彻，一下操作需要重新打開CMD讓上面的環(huán)境變量生效）
一豪娜、測(cè)試NPM安裝vue.js
命令：npm install vue -g
這里的-g是指安裝到global全局目錄去
image
image
二、測(cè)試NPM安裝vue-router
命令：npm install vue-router -g
image
image
image
運(yùn)行npm install vue-cli -g安裝vue腳手架
image
image
編輯環(huán)境編輯path
image
####### 對(duì)path環(huán)境變量添加
D:\nodejs\node_global
win10以下版本的哟楷，橫向顯示PATH的瘤载，注意添加到最后時(shí)，不要有分號(hào)【;】
image
重新打開cmd卖擅，并且測(cè)試vue是否使用正常
image
注意鸣奔，vue-cli工具是內(nèi)置了模板包括 webpack 和 webpack-simple,前者是比較復(fù)雜專業(yè)的項(xiàng)目，
他的配置并不全放在根目錄下的 webpack.config.js 中惩阶。
image
初始化挎狸，安裝依賴
image
運(yùn)行npm install安裝依賴
image
npm run dev
image
成功界面，提示打開地址http://localhost:8080
image
自動(dòng)打開瀏覽器http://localhost:8080/#/
image
npm run build
生成靜態(tài)文件断楷，打開dist文件夾下新生成的index.html文件
nmp下新建出來(lái)的vue01的目錄描述：
image
