chore: 初始化项目仓库

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 21:27:39 +08:00
commit b7addb5c7a
50 changed files with 15964 additions and 0 deletions
@@ -0,0 +1,62 @@
+---
+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 应用。
+
+![SvelteKit Logo](https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg)
+
+## 核心特点
+
+### 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。
+
+![Svelte 编译过程](https://svelte.dev/svelte-logo-horizontal.svg)