安裝使用配置NPM環境,並下載vue,vue-router,vue-cli

安裝Nodejs

這一步沒有什麼好說的,很簡單就下一步下一步安裝即可
我們直接找到官網的下載路徑下載即可,我下載的是下面的這個版本
在這裏插入圖片描述

安裝驗證:我們現在需要驗證是否安裝成功,所以我們打開cmd,在cmd 中輸入node -v 和 npm -v
在這裏插入圖片描述
可以看到安裝成功了,現在其實是可以使用的,但是爲了更好的管理我們的下載路徑所以我們需要更改一下全局環境

cmd 下輸入npm list -global,可以看到你的路徑,但是我忘記截圖了
在這裏插入圖片描述

再看看另外2個目錄,npm的本地倉庫跑在系統盤c盤的用戶目錄了(沒見到npm-cache是因爲沒有用過,一使用緩存目錄就生成了),我們試圖把這2個目錄移動回到D:\Program Files\nodejs

在這裏插入圖片描述

我們到指定的位置下手動創建這兩個目錄,現在是空的,因爲我們還沒配置

cmd 下輸入
npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

再次輸入npm list -global,你會發現刷刷出現一堆,有東西啦!
在這裏插入圖片描述

輸入命令npm config set registry=http://registry.npm.taobao.org 配置鏡像站,配置鏡像站的原因是原來自帶的鏡像站下載的速度非常感人,如果不介意的其實不配置也無所謂啦,截圖再次忘記

輸入命令npm config list 顯示所有配置信息
在這裏插入圖片描述

再次檢查一下鏡像站可否使用npm config get registry
在這裏插入圖片描述

npm info vue 獲取一下vue 的信息
在這裏插入圖片描述
輸如npm install npm -g ,這個-g 的參數表示裝到global 目錄下,也就是我們上面設置的路徑,這個時候npm 同時升級
在這裏插入圖片描述

再一次輸入npm list -global,查看global 中有什麼,畢竟之前是空的
在這裏插入圖片描述
在這裏插入圖片描述

注意,此時,默認的模塊D:\Program Files\nodejs\node_modules 目錄

將會改變爲D:\Program Files\nodejs\node_global\node_modules 目錄。

如果直接運行npm install等命令會報錯的。

我們需要做1件事情:

增加環境變量NODE_PATH 內容是:D:\Program Files\nodejs\node_global\node_modules,然後重新打開cmd

命令:npm install vue -g

這裏的-g是指安裝到global全局目錄去
在這裏插入圖片描述
然後我們去找一下,發現果然有個vue
在這裏插入圖片描述

再次測試:安裝vue-router
在這裏插入圖片描述
沒問題,成功了!
在這裏插入圖片描述

安裝vue 腳手架 vue-cli
在這裏插入圖片描述

在這裏插入圖片描述
我們到文件夾下找一下原因,發現vue的腳本在自定義的node_global 中,但是並不在環境變量中,所以我們知道啦,添加環境變量!
在這裏插入圖片描述

在這裏插入圖片描述
重新打開cmd 輸入 vue -V 注意這裏V是大寫的
在這裏插入圖片描述

我們可以愉快的使用一下了
cmd中切換到d:
輸入 vue init webpack vue01,然後就會開始問你以下的幾個問題,然後開始下載
在這裏插入圖片描述

在這裏插入圖片描述
如果直接這麼執行的話,會報錯的!
在這裏插入圖片描述
要執行npm install -g
在這裏插入圖片描述
忽略我打錯了哈哈啊哈哈哈哈
在這裏插入圖片描述

然而尷尬的是依舊報錯了,看了一下錯誤信息的日誌,也沒看懂,大致上是因爲webpack-dev-server的原因

原因:這是新版webpack存在的BUG,卸載現有的新版本webpack,裝老版本就好
webpack-dev-server 版本需要從最新版本降低到如下版本,因爲開始構建項目所用的插件版本太低
(1)、npm uninstall webpack-dev-server
(2)、npm install [email protected]
(3)、npm run dev
在這裏插入圖片描述

再次npm run dev 成功了!
在這裏插入圖片描述
npm run build,生成靜態文件
在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章