近期因工作的關係~需要研究 dotnet 8 template 用法, 我就連同 Vue3+Vite+Vutify 一次組裝完成, 做成模板來測試用.

Webpack 雖然在前端很強大，起專案和 HMR 的速度也跟著套件裝越多越慢，但隨著 IE 的沒落，很多套件其實都不需再使用。這時候新一代的技術 Vite 颳起一陣旋風，利用現代瀏覽器支持 ES 模塊的特性，直接用瀏覽器的資源做更快速的打包 & HMR，用了一次之後就回不去 Webpack 了 XD ~ 本篇說明如何用 NET 6 + Vite + Vue 3 來起一個新專案。

.NET 出到 6 之後，原本官方的 SPA 套件被棄用，新版改成使用 Vue-CLI + SPA Proxy。我們就從零開始建立新的 .NET6 + Vue-CLI (Webpack base) + Vuetify 專案吧～

Suspense 這個元件是 Vue 參考 React 那邊所得到的靈感。當我們打開頁面時，通常會有多個非同步的 API 呼叫，出現 Loading 中，等到資料都到齊，才會看到完整的頁面。以往都是用 v-if 來判別 data 是否都到齊，在 Vue 3 中就能用 Suspense 元件來做這件事情，且多個非同步的 API 也能自動判別，非常省時省力。

當我們在呼叫 API 後，通常會有很多後續的功能接續運作，例如：更換狀態、顯示錯誤訊息、使用 try catch blocks 等等。來看看這個搜尋範例是怎麼把程式碼抽取出來。

如果 Watch 在 composition API 要怎麼使用呢？我們一起來看看。

使用 Composition API 有兩個主要的原因，一個原因是把 component 依據功能重新組織，另一個主要原因是這些程式碼可以跨不同 component 重複利用。我們來看一下範例。

繼續看 Composition API 的 Reactive and toRefs。

.NET 5 之後會將 dotnet 各 platform 整合起來，且 dotnet 3.1 cshtml HMR 的 extension 功能被官方強迫棄用，目前我看各方文章感覺還沒有一個很好的升級方式。要馬就是改用網友寫的 Vue-Cli，把 config 轉到 cli，要馬就是 Nuget 套件改用網友寫的。我自己參考國外文章，是有人用 Vite 做到用 index.cshtml 的 HMR: 這篇。但是因為公司內部還是有 IE 瀏覽器且 Vite 相關套件還沒有到完整，沒辦法放棄使用 webpack，只好參考這篇嘗試用 webpack HMR，很不幸的，若照文章模仿雖然 HMR 字眼有出現，但一直沒有正常作用，胡亂嘗試了一番，勉強用奇怪的方式有做到 Auto Reload，但沒有 HMR 效果就不太滿意。目前先將這些研究文章和亂試的方式記錄下來。

今年四月信箱發現 Vue Mastery 又開放幾天全部課程免費的消息，所以趕快把之前沒看到的 Vue 3 Composition API 給補看起來！！