已發布·持續改進
Framework · 2020 年發布
SvelteKit 是使用 Svelte 建構 Web 應用程式的官方框架，提供以檔案為基礎的路由、伺服器端渲染、資料載入與彈性的部署方式。
SvelteKit 是 Svelte 團隊開發的官方應用程式框架，於 2020 年首次公開，以開放原始碼方式開發。它建構在 Svelte 之上——Svelte 會在建置時把元件編譯成高效率的 JavaScript——並加入路由、伺服器端渲染（SSR）、資料載入、表單處理以及建置與部署功能，開發伺服器與打包則由 Vite 負責。目前這一代的 Svelte 以 $state、$derived、$effect、$props 等符文（rune）表達響應式。
SvelteKit 的優勢在於可以逐頁選擇渲染方式。部落格文章、文件這類對所有人都相同的內容可以在建置時預先渲染；因使用者而異的頁面在伺服器上渲染；高度依賴瀏覽器 API 的畫面則可以只在用戶端渲染。表單 action 在沒有 JavaScript 時也能運作，並支援漸進增強。只要更換轉接器（adapter），同一套程式碼就能部署到 Node.js 伺服器、靜態託管，或 Vercel、Netlify、Cloudflare 等平台。
入門時，建議先用 npx sv create 建立專案，再依序完成 svelte.dev 上的互動式教學：先學 Svelte 基礎，再學 SvelteKit。較舊的資料常出現 export let、$lib、svelte.config.js 等如今已改變的語法與設定，因此學習時應以官方文件與目前的符文語法為準。
$state、$derived、$effect 與 $props 讓響應式清楚明確，編譯器產生的程式碼不需要虛擬 DOM，只更新有變動的部分。
src/routes 的資料夾結構就是 URL 結構；+page、+layout、+server、+error 檔案分別定義頁面、共用版面、API 與錯誤畫面。
透過 prerender、ssr、csr 選項，為每個頁面選擇伺服器端渲染、用戶端渲染或預先渲染。
以自動取得型別的 load 函式載入資料，並以即使沒有 JavaScript 也能運作的表單 action 修改資料。
SvelteKit 的開發以 Node.js 為基礎。請安裝目前的 LTS 版本，再於新的終端機中確認 node 與 npm 能顯示版本。
node --version && npm --version使用官方命令列工具 sv 建立新專案。過程中可以選擇範本、是否使用 TypeScript，以及 Prettier、ESLint、Vitest、Playwright 等附加功能。
npx sv create my-app進入專案資料夾，安裝相依套件並啟動開發伺服器。瀏覽器會開啟 http://localhost:5173，儲存檔案後變更會立即生效。
cd my-app && npm install && npm run dev -- --opensrc/routes/+page.svelte 是網站首頁（/）。以 $state 符文建立的 count 每次變動都會自動更新畫面，傳給 onclick 屬性的函式在每次點擊時把它加 1。要新增頁面，只需建立資料夾，例如 src/routes/about/+page.svelte。
src/routes/+page.svelte
<script lang="ts">
let count = $state(0);
</script>
<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
Clicked {count} times
</button>
npx sv create my-app && cd my-app && npm install && npm run dev共六章，帶你從安裝一步步認識 SvelteKit 的核心概念。
在這裡提問、分享經驗，交流關於 SvelteKit 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。