Svelte 5 + Vite 快速開發指南 - 蘇勃任

為什麼選擇 Svelte 5？#

Svelte 5 帶來革命性的 Runes 語法，讓響應式開發更加直覺：

編譯時期優化，執行效能極佳
無虛擬 DOM，更新效率高
語法簡潔，學習曲線平緩
套件體積小

專案初始化#

1
# 建立 Svelte 5 + Vite 專案
2
npm create vite@latest my-app -- --template svelte
3

4
# 進入專案目錄
5
cd my-app
6

7
# 安裝相依套件
8
npm install
9

10
# 啟動開發伺服器
11
npm run dev

Svelte 5 Runes 語法#

$state - 響應式狀態#

1
<script>
2
    // Svelte 5 使用 $state
3
    let count = $state(0);
4
    let user = $state({ name: '', email: '' });
5

6
    function increment() {
7
        count++;  // 直接修改即可
8
    }
9
</script>
10

11
<button onclick={increment}>
12
    點擊次數：{count}
13
</button>

$derived - 衍生狀態#

1
<script>
2
    let price = $state(100);
3
    let quantity = $state(1);
4

5
    // 自動計算的衍生值
6
    let total = $derived(price * quantity);
7
    let discount = $derived(total > 500 ? total * 0.1 : 0);
8
    let finalPrice = $derived(total - discount);
9
</script>
10

11
<p>總價：{total}</p>
12
<p>折扣：{discount}</p>
13
<p>應付：{finalPrice}</p>

$effect - 副作用處理#

1
<script>
2
    let searchTerm = $state('');
3
    let results = $state([]);
4

5
    // 監聽變化執行副作用
6
    $effect(() => {
7
        if (searchTerm.length > 2) {
8
            fetchResults(searchTerm).then(data => {
9
                results = data;
10
            });
11
        }
12
    });
13
</script>
14

15
<input bind:value={searchTerm} placeholder="搜尋..." />

Vite 設定#

vite.config.js#

1
import { defineConfig } from 'vite';
2
import { svelte } from '@sveltejs/vite-plugin-svelte';
3

4
export default defineConfig({
5
    plugins: [svelte()],
6
    server: {
7
        port: 3000,
8
        proxy: {
9
            '/api': {
10
                target: 'http://localhost:8069',
11
                changeOrigin: true
12
            }
13
        }
14
    },
15
    build: {
16
        outDir: 'dist',
17
        minify: 'esbuild'
18
    }
19
});

環境變數#

1
VITE_API_URL=http://localhost:8069
2
VITE_LIFF_ID=1234567890-abcdefgh

1
// 使用環境變數
2
const apiUrl = import.meta.env.VITE_API_URL;

整合 Tailwind CSS#

1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

1
export default {
2
    content: ['./src/**/*.{html,js,svelte}'],
3
    theme: {
4
        extend: {}
5
    },
6
    plugins: []
7
};

1
<!-- 使用 Tailwind -->
2
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
3
    按鈕
4
</button>

元件設計模式#

Props 與事件#

1
<script>
2
    let { label, variant = 'primary', onclick } = $props();
3

4
    const variants = {
5
        primary: 'bg-blue-500 text-white',
6
        secondary: 'bg-gray-200 text-gray-800',
7
        danger: 'bg-red-500 text-white'
8
    };
9
</script>
10

11
<button class={variants[variant]} {onclick}>
12
    {label}
13
</button>

使用元件#

1
<script>
2
    import Button from './Button.svelte';
3

4
    function handleClick() {
5
        console.log('clicked!');
6
    }
7
</script>
8

9
<Button label="送出" onclick={handleClick} />
10
<Button label="取消" variant="secondary" />
11
<Button label="刪除" variant="danger" />

API 整合#

1
const API_URL = import.meta.env.VITE_API_URL;
2

3
export async function fetchData(endpoint) {
4
    const response = await fetch(`${API_URL}${endpoint}`);
5
    if (!response.ok) throw new Error('API Error');
6
    return response.json();
7
}
8

9
export async function postData(endpoint, data) {
10
    const response = await fetch(`${API_URL}${endpoint}`, {
11
        method: 'POST',
12
        headers: { 'Content-Type': 'application/json' },
13
        body: JSON.stringify(data)
14
    });
15
    return response.json();
16
}

專案結構#

1
src/
2
├── lib/
3
│   ├── api.js          # API 封裝
4
│   └── utils.js        # 工具函數
5
├── components/
6
│   ├── Button.svelte
7
│   ├── Card.svelte
8
│   └── Modal.svelte
9
├── pages/
10
│   ├── Home.svelte
11
│   └── Detail.svelte
12
├── App.svelte
13
└── main.js

建構與部署#

1
# 建構生產版本
2
npm run build
3

4
# 預覽建構結果
5
npm run preview

Svelte 5 + Vite 的組合提供了極佳的開發體驗與效能表現，非常適合建構現代化的 Web 應用。