63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
---
|
||
title: SvelteKit 入门：为什么它比你想象的更简单
|
||
published: 2026-05-30
|
||
description: SvelteKit 是一个全栈 Svelte 框架，这篇文章带你了解它的核心概念和优势。
|
||
image: /posts/sveltekit-intro/img/cover.jpg
|
||
tags: ['SvelteKit', '前端框架']
|
||
draft: false
|
||
---
|
||
|
||
## 什么是 SvelteKit？
|
||
|
||
SvelteKit 是 Svelte 的官方全栈框架，类似于 React 之于 Next.js 的关系。它提供了路由、SSR、SSG 等能力，让开发者可以快速构建现代 Web 应用。
|
||
|
||
|
||
|
||
## 核心特点
|
||
|
||
### 1. 编译时框架
|
||
|
||
Svelte 和 React/Vue 最大的区别在于：**它在编译阶段就把组件转成原生 JS**，运行时没有虚拟 DOM。
|
||
|
||
```typescript
|
||
// Svelte 组件（编译后变成直接的 DOM 操作）
|
||
let count = 0
|
||
function increment() {
|
||
count += 1
|
||
}
|
||
```
|
||
|
||
### 2. 文件路由
|
||
|
||
`src/routes/` 目录结构即 URL，不需要手动配置路由表：
|
||
|
||
```
|
||
src/routes/
|
||
├── +page.svelte → /
|
||
├── about/
|
||
│ └── +page.svelte → /about
|
||
└── posts/
|
||
├── +page.svelte → /posts
|
||
└── [slug]/
|
||
└── +page.svelte → /posts/:slug
|
||
```
|
||
|
||
### 3. 全栈能力
|
||
|
||
SvelteKit 内置了服务端渲染（SSR）、静态站点生成（SSG）、API 路由等功能，开箱即用。
|
||
|
||
## 和其他框架对比
|
||
|
||
| 特性 | SvelteKit | Next.js | Nuxt |
|
||
|------|-----------|---------|------|
|
||
| 学习曲线 | 低 | 中 | 中 |
|
||
| 包体积 | 小 | 大 | 中 |
|
||
| 运行时开销 | 无 | 有 | 有 |
|
||
| 生态 | 小 | 大 | 大 |
|
||
|
||
## 总结
|
||
|
||
如果你追求**简洁的代码**和**极致的性能**，SvelteKit 是一个非常值得尝试的选择。它的学习曲线平缓，写起来就像在写原生 HTML/CSS/JS。
|
||
|
||
|