安裝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,生成靜態文件