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

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

最近因緣際會下本來想做個讀取 Google Sheet API 的 web app 放在 github page，但發現 github 有擋住部分功能，所以想說看能不能改放在 Azure 雲端上，搜尋之後發現這個神奇的 plugin，Azure Static Web Apps 可以在 vscode 做一些簡單的設定，就能把 github 上的前端 web app 自動透過 github Action，CICD 到 Azure Cloud 上，底層還是會在 Azure 建立一個 Azure Function。話不多說，直接來說明怎麼設定吧～

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

.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 效果就不太滿意。目前先將這些研究文章和亂試的方式記錄下來。

上一篇寫過 .NET core 3 + Vue-cli 3 的起手式，這次我們要把做好的專案寫成 dotnet new 的範本，這樣以後就不用做這麼多繁瑣的步驟啦！

因為 sourcetree 在公司內網些時候會一直跳出輸入 AD 帳密的視窗，前陣子因為換了密碼，結果舊密碼被記住，結果每用一次 sourcetree 就會被鎖一次帳號，真是冤望啊！後來索性就決定刪掉 sourcetree ，想說如果全部都在 vscode 一次解決就完美了～所以就開始我的 vscode extention 探索之旅。

之前有寫過一篇 .NET core 2 + Vue-cli 2 的起手式，到了2019，兩者也紛紛出版本3。這次，我們將說明如何用 .NET Core 3 + Vue-cli 3 起一個新專案，附贈最新 Vuetify 2 的 Material Design 框架。

第一次接觸使用 Azure SignalR，順便玩玩看雲端託管的服務，那我們就來開始吧～

紀錄 .NET Core 升級到 2.2 和 Webpack 升到 4 要注意的地方～