Hi Da Gei Ho～ 初次見面，我是Winnie～

我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師)，如果對於我的轉職的過程有一絲好奇的朋友的可以看看 這篇文章 在23歲的結尾，我實現想了很久的事 (文長..)

按照慣例 第一篇文章我也想先來跟大家說說為什麼選這個主題 及 預計會撰寫的大綱內容吧 ～

今年，自己從網頁設計師轉職成前端工程師，由於是非本科生也無相關經驗，所以前端各種技術對於我來說就像黑洞一樣深啊。而我決定以黑洞計畫就是為主軸意象，希望未來可以延伸出各種技術的系列文章。

為什麼會選 Vite + Vue Composition API ？

應該是因為主管推坑吧XD

雖然上面也是部分原因啦XDD，但主要原因還是因為 Vue3 Composition API 是自己轉職後第一個深入接觸的技術，而開發的過程中碰到的坑實在多到數不清，也因為這樣累積了許多零散的筆記，有點不完整，所以希望透過這次 IT鐵人賽的機會 重新整理 及 檢視自己 對於 Vue3 Composition API 到底了解了多少。（我評估目前理解程度應該是55%吧）

另外~ 關於Vite 我真的是 『不用不知道，一用還真是嚇一跳啊』，開發體驗真的快到讓我以為我坐上了什麼北極特快車，開發體驗實在太快了，所以我也想透過這次機會 深入了解 Vite 這麼快的背後是使用了什麼技術，是怎麼實現的。

畢竟如果只會使用工具，卻不知道為什麼這麼用的時候，我覺得蠻令人害怕的啊～

主要大綱內容

前面說了這麼多，接著就來說說預計會有的大綱內容吧，目前分為四大部分，分別是以下：

- 微談 模組化 及 現有開發工具 微歷史篇

此部分主要會介紹 模組化 演化過程 及 現有開發工具 如何進行編譯的，讓我們在進入 Vite 前，可以更了解 為何我們開發需要 工具來編譯。

- Vite 核心背後 篇

接著是Vite 核心篇，如果前面有理解 現有開發工具編譯方式 後， 接著我們可以來了解 Vite 是如何運用 原生 ESM 達成 快速編譯的，而除了 原生 ESM ，Vite HMR 究竟還使用了哪些技術，都會在此部分作介紹。

- 實際操作 Vite 篇

到這邊，Vite最深奧的部份已經結束了，接著這部份我們預計會實際示範 Vite的各種功能，體會看看他到底多香，同時也推薦一些目前自己使用的一些Vite套件，在開發速度上可以達到前所未有的體驗。

- Vue Options API 與 Composition API 篇

此部分主要會討論 Composition API 的好處 ，而 Vue Options API 主要會碰到什麼問題， 而Composition API 可以解決什麼問題。對比兩著之間的差異。

- Vue3 Composition API 核心篇

最後一部分，因為 Composition API 與 Options API 使用方式不盡相同，沒有了this、 data、 method 等方法 要怎麼在composition API撰寫呢 ？ 所以此部分主要會介紹 新增的方法 如何使用。

今天就先到這了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教 謝謝 。