為何寫 Vue3 技術文章
去年初參加六角學院切版、 JavaScript 、 Vue 直播班，報名上述前先購入其「前端工程師必備」套裝影音課，期間直播班和影音課相輔學習。三門學科學習過程對從資料庫工程師轉戰前端技術者，難度可說是節節攀高尤其 Vue 更為驟升。

參加第 15 屆鐵人賽是為了透過 Vue 框架技術建構一網站來複習所學。這系列文章不會從 Vue 基礎知識點分類介紹，而是運用網路上用 Vue3 做出網站等共享資源，跟著 Step-by-Step 練習實作開發。共享的 Step-by-Step 資源好處在於有程式碼可以參考，當作檢核自己所寫，畢竟沒了線上課程不好找到人批改程式碼。期望「跟著雲端前輩用Vue開發網站」系列文章能幫助和我一樣學完 Vue 想練練手的前端小白（因 Vue 框架底層是 JavaScript 技術，需有其底子的小白才可服用），從實作複習 Vue 技能並透過筆記檢視學習的吸收程度。

主題與學習目標
為貼切日常生活這系列文章挑選商店網路平台作主題，開發工具採用 Visual Studio（版本1.81.10）進行（套件請見下一小節），練習使用框架進行關注點分離，即資料與畫面分離、資料與方法分離為概念開發，並嘗試加入 Pinia 跨元件狀態管理工具將元件統一管理。

Vue3 開發用到的 Visual Studio 套件

• Vetur：Vue 官方提供的 Vue 整合插件，能提示 Vue 語法錯誤處與校正建議。
• Vue 3 Snippets：基於最新 Vue 2 及 Vue 3的 API 添加 Code Snippets。

後續若有用到其他套件將於往後各篇章補上。