环境搭建与项目创建

Node 环境准备

SvelteKit 项目需要 Node.js 运行环境。建议安装 Node.js 20 或更高版本（推荐 LTS 版本）。SvelteKit 2.70.x 配套 Vite 8，Vite 8 要求 Node.js 20.19+。

打开终端，检查 Node 是否安装成功：

node -v
npm -v

如果能正常输出版本号，说明环境就绪了。

用 sv create 创建项目

Svelte 官方提供了 sv CLI 工具来创建项目。一行命令就能搞定：

npx sv create my-app

运行后，CLI 会问你几个问题：

1. 模板选择：minimal（最简模板）、demo（示例应用）、library（组件库模板）
2. 类型检查：ts（TypeScript）、jsdoc（JSDoc 注释类型）
3. 附加工具：ESLint、Prettier、Tailwind CSS 等（可多选）
4. 包管理器：npm、pnpm、yarn、bun、deno

选好之后，CLI 会自动生成项目文件并安装依赖。

也可以用命令行参数跳过交互，一步到位：

npx sv create my-app --template minimal --types ts --add eslint prettier --install npm

常用参数一览：

参数	说明	可选值
--template	项目模板	minimal / demo / library
--types	类型检查方式	ts / jsdoc
--no-types	不加类型检查	—
--add	预装附加工具	eslint prettier tailwindcss 等
--install	指定包管理器	npm / pnpm / yarn / bun / deno
--no-install	跳过依赖安装	—

启动开发服务器

项目创建好后，进入目录启动开发服务器：

cd my-app
npm run dev

终端会输出类似这样的信息：

  VITE v8.2.0  ready in 300 ms

  ➜  Local:   http://localhost:5173/

浏览器打开 http://localhost:5173/，你就能看到项目首页了。修改代码后页面会自动刷新，这就是 Vite 提供的热更新（HMR）功能。

项目目录结构

创建好的项目大致长这样：

my-app/
├─ src/
│  ├─ lib/           # 组件和工具函数
│  ├─ routes/        # 页面路由
│  ├─ app.html       # 页面模板
│  ├─ app.css        # 全局样式
│  └─ hooks.server.js # 服务端钩子（可选）
├─ static/           # 静态资源（favicon 等）
├─ package.json
├─ svelte.config.js  # Svelte/SvelteKit 配置
├─ vite.config.js    # Vite 配置
└─ tsconfig.json     # TypeScript 配置

几个关键目录和文件的作用：

• src/routes/：每个文件对应一个页面路由，是 SvelteKit 的核心约定
• src/lib/：存放可复用的组件和工具函数，通过 $lib 别名导入
• src/app.html：页面 HTML 外壳模板，包含 %sveltekit.head% 和 %sveltekit.body% 占位符
• src/app.css：全局样式文件
• static/：直接原样提供的静态文件，如 favicon.ico、robots.txt
• .svelte-kit/：SvelteKit 自动生成的临时目录，可以随时删除，不要手动编辑

核心配置文件

svelte.config.js

这是 Svelte 和 SvelteKit 的主配置文件：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter()
	}
};

export default config;

• preprocess：预处理器配置，vitePreprocess() 让你能在 .svelte 文件中使用 TypeScript、PostCSS 等
• kit.adapter：部署适配器，决定项目构建后怎么跑。adapter-auto 会自动适配部署平台，也可以换成 adapter-node、adapter-static 等

vite.config.js

SvelteKit 项目本质上是 Vite 项目，只是加了 SvelteKit 插件：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()]
});

如果你需要配置代理、别名、构建选项等，都在这里改。

package.json

package.json 里有两个关键配置：

{
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

• "type": "module"：项目使用 ES Module 语法（import/export），而不是 CommonJS（require）
• dev：启动开发服务器
• build：构建生产版本
• preview：预览构建产物

不用 SvelteKit 行不行

如果你只想做单个 Svelte 组件或简单的 SPA，不想要 SvelteKit 的全套功能，也可以直接用 Vite + Svelte 插件：

npm create vite@latest my-app -- --template svelte
cd my-app
npm install
npm run dev

这种方式更轻量，但你得自己处理路由、SSR 等问题。

本节回顾

• Node.js 20+ 是开发前提，用 npx sv create 创建项目
• sv create 支持 --template、--types、--add 等参数，可跳过交互
• npm run dev 启动开发服务器，默认端口 5173
• 核心目录：src/routes/（路由）、src/lib/（复用代码）、static/（静态资源）
• 核心配置：svelte.config.js（SvelteKit 配置）、vite.config.js（Vite 配置）
• 也可以不用 SvelteKit，直接用 Vite + Svelte 插件做轻量项目