一 下載node.js 配置 nmp
-
下載node.js
- 查看環(huán)境變量和版本
-
設(shè)置npm 的本地倉庫路徑到 D:/nodejs下
- 在D:/nodejs下創(chuàng)建node_global 和 node_cache 兩個文件夾我碟。
- 然后執(zhí)行如下命令：
npm config set prefix "D:\nodejs\node_global"
npm config set prefix "D:\nodejs\ node_cache"
-
配置淘寶鏡像
- 配置淘寶鏡像 （因?yàn)楣J(rèn)淘寶的鏡像速度比較快）
- 查看配置信息 命令： npm config list
看我們修改的庫文件 和鏡像地址是否生效了~~
- 公司內(nèi)部無法使用淘寶鏡像重新配置
-
確認(rèn)鏡像可以使用
輸入 npm info vue 如果鏡像無法使用會報錯
image.png
-
重新安裝最新版本npm
- 更新最新的npm版本 通過 npm install npm -g 進(jìn)行全局安裝
PS： 全局安裝及安裝到剛才指定的D:\nodejs\node_global 文件夾中
- 此時我們會發(fā)現(xiàn)崇猫，在D:\nodejs\node_global 中也出現(xiàn)了一個node_modules的文件夾，里面安裝好了最新的nmp货葬。與D:\nodejs\node_modules相同垄琐。
之后我們通過nmp安裝的全局modeules都會放在D:\nodejs\node_global \node_modules中
至此， npm的安裝和配置已經(jīng)完成。下面繼續(xù)介紹vue相關(guān)的安裝和配置
二 vue征讲、vue-cli的安裝
-
全局安裝vue、vue路由橡娄、 vue腳手架
通過 nmp命令進(jìn)行全局安裝
- nmp install vue -g
- nmp install vue-router -g
- nmp install vue-cli -g
image.png
-
添加vue的環(huán)境變量
上圖顯示 輸入 vue顯示不是內(nèi)外部命令诗箍，需要添加環(huán)境變量
- 將 ;D:\nodejs\node_global 加入到環(huán)境變量中
image.png
PS: 如果加入環(huán)境變量后，cmd中執(zhí)行 vue-V 依然顯示vue不是內(nèi)外部命令
在cmd中執(zhí)行 echo %PATH% 查看添加的D:\nodejs\node_global是否在其中挽唉，如果沒有證明添加的變量沒有生效滤祖。重啟電腦，重新通過echo %PATH%查看環(huán)境變量
-
執(zhí)行 vue -V （注意大寫的V）顯示如下圖片即可
image.png
三 通過vue-cli 創(chuàng)建工程
-
安裝vue-cli
通過 npm install -g @vue/cli 下載vue-cli
-
創(chuàng)建工程
vue create data_center (工程名)
按照如下的步驟進(jìn)行選擇配置
image.png
下面是一些配置的選項(xiàng)瓶籽〗惩可以自行百度選擇。
-
創(chuàng)建工程的目錄如下
image.png
