# Vue cli 相關安裝注意事項 (2.0.X以下版本適用)

<p style="color: red">安裝前務必要注意當前 node.js 的版本,以免運行時有不相容的情況!!</p>

請透過`node -v`來檢查當前安裝的node.js的版本

## 請按照以下步驟來執行

1. 開啟 vscode 的終端機(快速鍵: Ctrl + ` )

2. 輸入` npm install vue-cli `來安裝 vue cli

3. 安裝完畢後執行`vue init 模板 專案名稱`
(模板的部分可以用`vue list`查詢,我們多會使用webpack,至於專案名稱的部分可以自由命名)

4. 終端機會問你一些安裝上的問題,請參考"如何使用vue cli"章節課程影片

5. 結束之後輸入`cd 專案名稱` ,再執行`npm install`

6. 安裝完成後,可藉由`npm run build`指令來產生一個dist資料夾,以自由編輯Production

7. 最後執行`npm run dev`就功德圓滿了

## 導入bootstrap及sass
由於node部沒有完整載入sass,所以必須自行安裝才行,再次提醒:
</br>
<p style="color: red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安裝前務必要注意當前 node.js 的版本,以免運行時有不相容的情況!!</p>
</br>

</br>

1. 輸入`npm install bootstrap`來安裝Bootstrap

2. 請透過`node -v`來檢查當前安裝的node.js的版本

3. 若node版本為最新的(當前(2020/11/24)為15.0.0或15.數字.數字),直接輸入 `node-sass`以及`sass-loader`即可

4. 如果node並非最新版本,可透過
`npm install --save-d node-sass@"版本號"`
`npm install --save-d sass-loader@"版本號"`
來安裝指定版本 <span style="font-size: 5px">註1</span>

<span style="font-size: 5px">註1. sass-loader 的部分建議使用7.2.0版,比較沒有問題, node-sass則建議至[官網查詢](https://www.npmjs.com/package/node-sass)對應版本
</span>