vue-cli(vue-V:2.9.6)建立專案（管理員模式執行）

說明：本篇部落格試用於vue2版本，如果用vue2開發，按照本文的版本步驟建立工程，基本沒問題，如果用的node、vue-cli、sass-loader、node-sass、vue-router......等版本和本文不一樣可能會出錯。

如果安裝出現問題一定要檢查安裝的檔案是否拼錯：

• （舉例：我安裝sass-loader時控制檯拼成了sass-loder，少一個字母a，打死也不會成功）

一、node安裝v12.13.0

1. node下載、安裝：參考視訊

想全面學習vue可以看此連結：網上找的：vue全面講解筆記，看不懂的可以看

• 下載node-v12.13.0-x64.msi

• 安裝node只看此連結的安裝作為參考，node安裝出現2503、2502錯誤，解決辦法

• 環境配置建議看此連結：此連結可以借鑑的點：全域性npm（-g）環境配置的更改；淘寶映象工具cnpm下載，映象切換工具nrm建議不要下載，用它切換映象容易出問題，npm與cnpm就夠用了，這兩個都不行，再切換其他映象也是會失敗！

• 安裝收藏以後可能用到

二、下載vue-cli、webpack與webpack-cli

• 管理員身份執行cmd

• 全域性下載vue-cli、webpack與webpack-cli

  • npm install vue-cli -g
  • npm install [email protected] -g
  • npm install [email protected] -g

• 檢視版本

  • vue -V （版本應該是2.9.6）
  • webpack -v
  • webpack-cli -v

三、建立工程：hello-vue

1. 管理員身份執行cmd，進入目錄D:\IT\vue-study
   • d:
   • cd D:\IT\vue-study
2. 建立一個名為hello-vue的工程：
   • vue init webpack hello-vue
3. 進入專案工程：
   • cd hello-vue
4. 安裝[email protected]：（如果安裝失敗往後看出錯原因
   ）
   • npm install [email protected] --save-dev
5. 安裝[email protected]
   • npm i [email protected] -S（注意-S的S是大寫）
6. 安裝依賴
   • npm install
7. 安裝SASS載入器
   • npm install [email protected] --save-dev（如果安裝失敗往後看出錯原因）
   • npm install [email protected] --save-dev 開啟專案需改成7.3.1（具體步驟可以看上面提到白嫖視訊）
   • 專案初始化報 404 Not Found - GET https://registry.npmjs.org
8. 啟動測試
   • npm run dev

vue3建立專案網上找的

四、npm安裝vue-router報錯原因分析：

1. 未使用管理員許可權下載vue-router，不知道的百度查詢

2. webpack與webpack不相容

（我用的版本親測可用：1. [email protected] 2. [email protected]）

判斷相容與否：管理員許可權開啟cmd，

• 全域性下載webpack與webpack-cli

• 控制檯輸入webpack -v，看輸出結果（只演示兩個包下載成功的情況）

  • 控制檯輸出：4.41.2；相容可用

  • 控制檯輸出：webpack:5.70.0，webpack-cli:4.1.11；不相容需更換版本，可將webpack-cli換成webpack-cli:3.3.12）

3. vue-router版本過高降低版本

• 控制檯輸入：npm install [email protected] --save-dev

五、 node-sass下載失敗分析：

node-sass 安裝失敗的各種坑

看評論

安裝windows平臺編譯環境（需要在管理員許可權下安裝）

• npm install -g [email protected]
• npm install --global windows-build-tools --vs2015（出現python安裝2503錯誤，參考上面node安裝2503出錯解決辦法）

node安裝