重構我的網站：Astro 與 Vue 重構心得分享

Astro 第一次衝擊

How I make a podcast website using serverless technology in 2023 (Calpa Liu)

2023 年的香港開源大會成為了我對 Astro 的首次接觸之地。當時，我瞭解到這個全新的技術，從內心被它所吸引。Astro 不僅僅是一個靜態網站生成器，更是能夠將動態框架（如 Vue.js、React 等）轉化為靜態網站的強大工具，能夠極大地提升網站的性能和載入速度。作為一名極度重視用戶體驗的前端開發者，這個概念對我來說，無疑是一個引人振奮的創新。

Gatsby website (Gatsby)

然而，與此同時，我視野中並未侷限在 React，更多地考慮了其他技術，例如 Vue。我之前已經在網站開發中使用過 GatsbyJS，這讓我對於靜態網站的優點有了更深刻的體會。但在選擇開發技術時，我偏向於根據不同專案的需求來選擇最適合的技術，例如 Svelte 或 Vue，而不僅僅局限於某個特定的框架。這種多樣性的取向，使我能夠更靈活地應對各種挑戰，並確保我為用戶提供最佳的體驗。

在這次的開源大會中，Astro 的概念為我開啟了全新的思維。它激發了我對於網站性能和用戶體驗的關注，我期待著能夠將這個創新的技術運用於我的項目中，為我的網站訪問者創造更快、更優越的瀏覽體驗。

關於 Astro

在當今快速發展的網絡世界中，前端開發者面臨著日益複雜的挑戰。而在這樣的背景下，Astro 出現在我們的視野中，為現代前端開發提供了一個嶄新且引人注目的解決方案。Astro 不僅僅是一個靜態網站生成器，它更是一種引領性能和彈性的全新方法。

核心理念：性能和彈性的完美平衡

Full Speed Performance

Astro 在設計上專注於「動態渲染即需求時渲染」的核心理念。這一理念旨在解決傳統動態框架面臨的性能問題，同時保持了動態網站所具備的彈性和互動性。通過將動態框架（如 Vue.js、React 等）的組件轉化為靜態網站的內容，Astro 在伺服器端預渲染，從而實現極快的頁面載入速度。這種獨特的方法不僅確保了用戶在訪問網站時立即獲取內容，同時也大幅減少了後續的數據請求，極大地提升了整體性能。

開發者友好：性能與便利的雙贏

然而，Astro 不僅僅是性能的追求者，它同時也將開發者的便利性放在重要位置。Astro 提供了一系列豐富的開發工具，例如動態資料查詢和組件預取，這些工具賦予開發者更大的靈活性，讓他們能夠更輕鬆地處理數據和渲染的挑戰。此外，Astro 還通過支援多種框架和庫（如 Vue、React、Svelte 等），確保開發者可以根據項目需求選擇最適合的技術，無論是在保證性能的同時還是實現項目目標。

整合 Vue 組件：打造動靜結合的網站

Element Plus website (Element Plus)

隨著對 Astro 的初步瞭解，我開始深入探索如何無縫地將 Vue 組件整合到網站中，以實現動靜結合的網站體驗。我深刻明白，在選擇 Vue 組件時，最大程度地節省開發時間至關重要。出於這個考量，我毅然選擇了 Element Plus 這個優秀的 UI 庫，這個庫提供了豐富的現成組件，讓我能夠輕鬆地將它們整合到我的網站中，無需耗費大量的時間在 UI 設計和開發上。

Element Plus 在我心中堪稱是目前最受歡迎的 UI 庫之一。事實上，我甚至在公司內部積極倡導使用 Vue + Element Plus 的開發方案，這個方案不僅讓我們能夠快速建立精美的界面，同時也確保了我們的開發團隊保持一致的設計風格。

這種動靜結合的方式，不僅能夠提升網站的性能，同時也確保了開發過程的高效。整合 Vue 組件，特別是搭配 Element Plus 這樣出色的 UI 庫，使我能夠在維持性能的同時，為用戶提供優雅且功能豐富的網站體驗。

關於 Tailwind CSS

Tailwind CSS Website (Tailwind CSS)

Tailwind CSS 是一個強大的工具，它不僅能夠讓我快速構建精美的界面，還能夠使我更加靈活地調整 UI 的 CSS。通過在 HTML 標籤中添加特定的 class，我可以輕鬆地調整元素的各種樣式，從而實現所需的外觀效果。

例如，我可以使用 m-{size} 類別來調整 margin，使用 p-{size} 類別來調整 padding，這使得調整元素間距變得十分便捷。同樣地，我可以使用 bg-{color} 類別來改變背景顏色，使用 text-{color} 類別來調整文字顏色，讓我能夠快速實現自定義的外觀需求。

此外，Tailwind 還提供了各種類別來調整元素的寬度、高度、邊框、陰影等多種樣式屬性。這種精細的樣式調整能夠讓我在不需撰寫大量自定義 CSS 的情況下，實現項目中所需的視覺效果。

總之，Tailwind CSS 的整合使我在開發過程中能夠快速且靈活地調整 UI 的各項樣式，從而節省時間，提高效率，同時也讓我能夠更加專注於項目的功能實現。

Astro + Vite 配置的優勢：自動導入、Tailwind 和元件優化

透過在我的專案中運用 Astro + Vite 這個強大組合，我深刻體驗到了其中的諸多優點。在我的 astro.config.mjs 設定檔中，我充分發揮了 Vite 豐富的功能，結合了自動導入、Tailwind 風格，以及 Vue 元件的優化，讓我的開發流程變得更高效且功能強大。

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import vue from "@astrojs/vue";

// https://astro.build/config
export default defineConfig({
  vite: {
    ssr: {
      noExternal: [
        '@astrojs/vue',
        'element-plus'
      ],
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
  integrations: [tailwind(), vue()],
  experimental: {
    assets: true,
    viewTransitions: true
  },
});

首先，自動導入功能讓模組引入變得輕鬆，省去了繁瑣的手動引入步驟。我特別重視在設定中運用了 unplugin-auto-import/vite，並指定了 ElementPlusResolver，這讓我能夠自動引入 Element Plus 的元件，無需為每個元件單獨撰寫引入語句。

同時，我也依賴於 unplugin-vue-components/vite 這個插件，同樣指定了 ElementPlusResolver，讓我更輕鬆地使用 Vue 元件，同時也將 Element Plus 的元件融合進來。這不僅節省了大量開發時間，也讓我的程式碼更加清晰易維護。

至於整合 Tailwind 方面，我選擇使用 @astrojs/tailwind，這讓我能夠直接在 Astro 專案中輕鬆應用 Tailwind 的風格，不再需要額外的配置。這讓我能夠更專注於開發，而不用為了設計風格而困擾。

一段小插曲

在網站重構過程中，我遭遇了一個有趣的問題，而解決這個問題的過程卻為我帶來了更多對技術的理解。這個問題涉及到了我使用的兩個重要庫，即 Element Plus 和 Tailwind CSS。

具體來說，當我嘗試將 Element Plus 的按鈕樣式應用於我的項目時，卻發現這些樣式並未生效。透過對這個問題的調查，我發現這是因為 Tailwind CSS 的一個特性，導致它的樣式將 Element Plus 的樣式覆蓋掉，使得按鈕外觀無法正確呈現。

在尋找解決方法的過程中，我在 Tailwind CSS 的 GitHub 討論區上找到了一個有趣的討論串 1。解決方案是通過在 tailwind.config.js 設定檔中，將 corePlugins 的 preflight 設置為 false，從而禁用 Tailwind 的預設樣式。這樣，我就能夠避免 Tailwind 的樣式干擾 Element Plus 的樣式，使得按鈕外觀得以正確顯示。

https://github.com/tailwindlabs/tailwindcss/discussions/5969#discussioncomment-6707009

以下是我在 tailwind.config.js 中的設定範例：

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	}
}

這個小插曲提醒了我，在整合不同庫和工具的過程中，可能會出現意想不到的衝突和挑戰。同時，也讓我更加深入地了解了庫和框架的運作原理，以及如何通過調整配置來解決問題。這種在問題解決過程中獲得的寶貴經驗，對於我未來的開發工作將會十分有益。

未來展望

Connecting the dots - Steve Jobs

整合了 Astro 與 Vue，我獲得了一股嶄新的動力與能量。在這次的網站重寫過程中，我深刻感受到這兩者結合所帶來的卓越效果。Astro 的靜態網站生成能力與 Vue 的動態組件融合在一起，為我的專案注入了新的生命。這種組合的優點不僅體現在用戶體驗的提升，同時也反映在開發效率的提高。而最令我感激的是，這種結合彷彿践行了 Steve Jobs 所說的「Connecting the dots」，將不同的技術點連接在一起，產生了出乎意料的效果和能量。

正如 Steve Jobs 所強調的，我們有時難以預測未來，但當回顧過去時，我們會發現那些看似不相關的點滴實際上在未來形成了一幅精彩的畫面。這正是我在整合 Astro 和 Vue 的過程中的體會，我將它們視為我職業生涯中兩個關鍵的「點」，這些「點」正逐漸連接成一幅更宏大的圖景，豐富了我的專業道路，也使我更有信心迎接未來的挑戰和變革。

展望未來，我期許能持續邁進，每日累積微小進步，善用「複利」效應，讓這些小小的原子習慣日積月累，進一步充實生活的內涵。不知不覺間，我已在這個領域工作了五年，從最初的前端工程師，逐漸轉變為現在的全端開發者。我的技能組合涵蓋了廣泛的技術，包括 HTML5、CSS3、JavaScript、TypeScript、Vue.js、React.js 以及 AWS 服務器的部署與管理。這些專業知識自然地推動我邁向系統架構師的角色。

感謝這些技術所帶來的啟發和能量，它們讓我能夠在這個不斷變遷的數位世界中，緊緊地連結著「點」，並創造更多可能性。