這邊先列出在第一階段學習過程中，所會使用到相關資源與工具。

Vue 官方文件

官網上有提供相關文件可供學習。

開發工具

課程中講師使用的是 Visual Studio Code 搭配延展模組 vue、Vue 2 Snippets 與 Preview on Web Server。

其中，vue 與 Vue 2 Snippets 是提供 Vue 的 Highlight 與 Snippets 功能，算是第二階段才會使用的的工具主要作用在 .vue 檔上。

而 Preview on Web Server 顧名思義就是在瀏覽器上預覽網頁，不過我在試著啟動這個套件時遇到錯誤訊息：

command 'extension.launch' not found

所以我直接改用另一個套件 Live Server。

是說，關於 Vue 延展模組有發現另一套星星更多的 Vetur，它的功能看起來是 vue + Vue 2 Snippets 的合併版，也可以拿來試試看。
　　
不過因為之前是使用 Android Studio 與 IntelliJ IDEA 這 JetBrains 系列的 IDE，所以我開發環境可能會選擇同系列的 Webstorm。

網頁除錯工具

因為 Vue.js 是以資料驅動的一種架構，因此開發過程需要觀察當時資料是否符合預期。

除了直接透過 console 觀察資料外，也可以透過 Vue.js devtools 來觀察甚至修改資料，相關操作可以看這篇教學。
　　
　　
因為可以直接修改資料，建議網站上線前務必關閉除錯功能。

/* 關閉vue-devtools */ 
Vue.config.devtools = false; 

/* 關閉錯誤警告 */
Vue.config.debug = false;

其他連結

1. 【Vue.js 學習筆記】00. 目錄

參考資料

1. 六角學院-Vue 出一個電商網站｜Udemy
2. Vue.js｜Vue.js
3. Vue.js DevTools Tutorial

本文作者： 辛西亞．Cynthia
本文連結： 辛西亞的技能樹 / hackmd 版本
版權聲明： 部落格中所有文章，均採用 姓名標示-非商業性-相同方式分享 4.0 國際 (CC BY-NC-SA 4.0) 許可協議。轉載請標明作者、連結與出處！