ARTICLE
创建你第一个 sveltekit 项目
创建你第一个 sveltekit 项目，并运行起来。
July 18, 2025
4 MIN READ
环境搭建h2
安装 Node.jsh3
打开 Node.js 下载安装包，安装完成后，打开终端输入 node -v 查看版本号，如果显示版本号则安装成功。
❯❯❯ node -v
v22.13.0安装 Bunh3
打开 Bun.sh 下载安装包，安装完成后，打开终端输入 bun -v 查看版本号，如果显示版本号则安装成功。
# 在 Linux 或 macOS 上curl -fsSL https://bun.sh/install | bash
# 在 Windows 上powershell -c "irm bun.sh/install.ps1 | iex"创建项目h2
❯❯❯ bunx sv@latest create emoji-idioms
┌ Welcome to the Svelte CLI! (v0.8.17)│◆ Which template would you like?│ ● SvelteKit minimal (barebones scaffolding for your new app)│ ○ SvelteKit demo│ ○ Svelte library│◆ Add type checking with TypeScript?│ ● Yes, using TypeScript syntax│ ○ Yes, using JavaScript with JSDoc comments│ ○ No│◆ What would you like to add to your project? (use arrow keys / space bar)│ ◼ prettier (formatter - https://prettier.io)│ ◼ eslint (linter - https://eslint.org)│ ◻ vitest│ ◻ playwright│ ◼ tailwindcss (css framework - https://tailwindcss.com)│ ◼ sveltekit-adapter (deployment - https://svelte.dev/docs/kit/adapters)│ ◼ devtools-json (devtools json - https://github.com/ChromeDevTools/vite-plugin-devtools-json)│ ◻ drizzle│ ◻ lucia│ ◻ mdsvex│ ◻ paraglide│ ◻ storybook│◆ sveltekit-adapter: Which SvelteKit adapter would you like to use?│ ○ auto│ ○ node│ ○ static│ ● vercel (@sveltejs/adapter-vercel)│ ○ cloudflare│ ○ netlify│◆ tailwindcss: Which plugins would you like to add?│ ◼ typography (@tailwindcss/typography)│ ◼ forms (@tailwindcss/forms)│◆ Which package manager do you want to install dependencies with?│ ○ None│ ○ npm│ ○ yarn│ ○ pnpm│ ● bun│ ○ deno◆ Successfully installed dependencies│◇ Successfully formatted modified files│◇ Project next steps ─────────────────────────────────────────────────────╮│ ││ 1: cd emoji-idioms ││ 2: git init && git add -A && git commit -m "Initial commit" (optional) ││ 3: bun run dev --open ││ ││ To close the dev server, hit Ctrl-C ││ ││ Stuck? Visit us at https://svelte.dev/chat ││ │├──────────────────────────────────────────────────────────────────────────╯│└ You're all set!运行项目h2
❯❯❯ cd emoji-idioms❯❯❯ bun run dev --open
VITE v6.3.5 ready in 674 ms
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help集成 Shadcn UIh2
输入命令后，一路回车按下去就行了。
❯❯❯ bun x shadcn-svelte@latest init
┌ shadcn-svelte v1.0.6│◇ Which base color would you like to use?│ Slate│◇ Where is your global CSS file? (this file will be overwritten)│ src/app.css│◇ Configure the import alias for lib:│ $lib│◇ Configure the import alias for components:│ $lib/components│◇ Configure the import alias for ui:│ $lib/components/ui│◇ Configure the import alias for utils:│ $lib/utils│◇ Configure the import alias for hooks:│ $lib/hooks│◇ Config file components.json created│◇ Alias paths validated│◇ Setting up shadcn-svelte base configuration│◇ utils installed at src/lib/utils│◇ Stylesheet updated at src/app.css│◆ Successfully installed dependencies│└ Success! Project initialization completed.添加一些需要的组件，例如：
❯❯❯ bun x shadcn-svelte@latest add button label sonner┌ shadcn-svelte v1.0.6│◇ Components to install:│ button, label, sonner│◇ Ready to install components and dependencies?│ Yes│◇ button installed at src/lib/components/ui/button│◇ label installed at src/lib/components/ui/label│◇ sonner installed at src/lib/components/ui/sonner│◆ Successfully installed dependencies│└ Success! Components added.目录介绍h2
├── src│ ├── app.css│ ├── app.d.ts│ ├── app.html│ ├── lib│ │ ├── components│ │ │ └── ui│ │ │ ├── button│ │ │ ├── label│ │ │ └── sonner│ │ ├── hooks│ │ ├── index.ts│ │ └── utils.ts│ └── routes│ ├── +layout.svelte│ └── +page.svelte├── static│ └── favicon.svg├── bun.lock├── components.json├── package.json├── README.md├── eslint.config.js├── svelte.config.js├── tsconfig.json└── vite.config.tssrc 目录是项目的主要目录;
routes 目录是路由目录;
+layout.svelte 是布局文件;
+page.svelte 是页面文件。
src/app.css 是全局样式文件;
src/app.d.ts 是类型声明文件;
src/app.html 是 HTML 文件;
src/lib 目录是库目录;
src/lib/components 目录是组件库目录;
src/lib/components/ui 目录是 UI 组件库目录;