這回工作上遇到的「既有專案翻新」，因前人已有用 Vite + Vue3 翻新眾多傳統 HTML 頁面的其中一頁，有機會來製作個「Vue3 TypeScript Vite 多頁面模版」。這回筆記下一些技術細節。
內容
資料夾結構
html 頁面
1. 為了配合 vite 的 rollup 預設值，因此所有的 html 頁面都需統一放在專案根目錄下 (也就是和 vite.config.ts 同層)
2. 每一個 index 頁面，其 script 引入位置，要對應不同的 main.ts。每一個頁面都是獨立的 Vue 實體
3. 打包編譯時，由於是各自獨立的頁面，所以 index.html 是可以不用被打包的。完全可以自行控制。
src 資料夾
1. 新增一個 pages 資料夾，然後內部以 html 頁面名稱作為區隔。一個 html 頁面名稱的資料夾，代表一個 Vue 實體所存在的頁面。
2. 每個頁面間的跳轉，需使用 window.location.href
3. 因每個頁面都是獨立的 Vue 實體，所以有各自的 Vue Router 和 Pinia 狀態。彼此之間互不保存，每當換頁就是放棄既有的內容。
4. 若有跨頁面的儲存需求，如同 Vanilla 時代一樣，就是 localStorage 或是 DB 協助
5. 多頁面的共用元件、helpers…等，可獨立放在 pages 外的 /src
設定
TypeScript ( tsconfig.json )
Vite 模版生成的設定不容易覆蓋，建議可自行撰寫一個 tsconfig.json 為佳
ESLint ( .eslintrc.cjs )
1. env 的設定可把 browser, node, es2022, jest 這四個都設定為 true，便可少裝一下 @types
2. 由於 eslint 已經取消了關於程式碼排版方面的校正支援，建議搭配 prettier 一同使用
3. lint 的規則順序上， prettier 為最後參考。不過下指令校正時，可先 prettier 再 eslint
TailwindCSS & SCSS
這兩者各有所長，是可以並存的。由於 Vite 已經有搭配好相關的編譯器，所以可直接安裝 pnpm add -D sass 就可以使用
參考資料
1. VUE3.0+Vite 多页面应用配置
2. Vue3 + Vite 多页面开发
3. vue3-ts-vite：vue 项目 配置 多页面应用
