Day_01: 让 Vite 来开启你的Vue 前言

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撰写呢 ？ 所以此部分主要会介绍 新增的方法 如何使用。

今天就先到这了，谢谢愿意花时间看此篇文章的你，如果文章有错误的地方，再麻烦不吝啬的给予指教 谢谢 。