---
# System prepended metadata

title: Vue 課堂補充資源
tags: [youtube新手]

---

# Vue 課堂補充資源
###### tags: `youtube新手`

為了加強學習 Vue 前的基礎知識

除了 本課程中的「課前章節 - JS 必備觀念」外

另外卡斯伯老師也有額外補充許多 JS 知識

除了課綱內的內容外，同時可參考以下資源 :D
## JS 擴充知識

JavaScript 陣列處理必學巧技 https://www.youtube.com/watch?v=_vFuDQ_6Xt8
JavaScript 那個 let, const, var 到底差在哪？ https://www.youtube.com/watch?v=FGdKdn_CnWo
JavaScript 常見考題破解：物件傳值？傳參考？https://www.youtube.com/watch?v=y1odVMpi6dU

## 相關資源
課程練習手冊：

https://github.com/hexschool/vue3-starter-files/tree/gh-pages



### Chrome 必裝的 Vue 開發套件

Vue Devtools：

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg



### 課程使用的 CSS 函式庫 Bootstrap

六角學院翻譯中文版：

https://bootstrap5.hexschool.com/



### VSCode 相關套件

講師使用的佈景主題：https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark

Live Server：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Vue 官方提供的 Vue 整合插件：https://marketplace.visualstudio.com/items?itemName=octref.vetur

Vue 3 Snippets：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets



繁體中文版：https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

中文版安裝說明：https://wcc723.github.io/development/2019/12/01/vscode-chinese/



其它推薦 VSCode 套件：

https://wcc723.github.io/development/2020/12/13/vscode-extension/


## 常見問題
關於 Vue dev tools 的常見問題，有幾個地方可以檢查看看

- 需確保當前頁面一定要有 createApp 的程式碼（如果當頁有，可以另開新分頁確認，有時候重新整理也不會顯示）

- Vue 並非使用開發版本（課程中是使用開發版本）

- dev tools 並非對應 Vue 3 的版本，請確認是否使用 dev 版本（兩者僅能擇一開啟）

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg



由於這是 Vue3 的版本插件，如果未來需要用舊版的插件

可以從 Chrome 的後台進行切換喔（左邊是 Vue3、右邊則是 Vue2）

![](https://i.imgur.com/cXhUbpJ.png)


