SvelteKit Starter 项目教程

2024-08-18 11:23:44作者：段琳惟

Sveltekit starter project created with sveltekit, typescript, tailwindcss, postcss, husky, and storybook. The project has the structure set up for the scaleable web application.

项目地址：https://gitcode.com/gh_mirrors/sv/sveltekit-starter

1. 项目的目录结构及介绍

SvelteKit Starter 项目的目录结构如下：

sveltekit-starter/
├── src/
│   ├── lib/
│   ├── routes/
│   ├── app.html
│   └── hooks.js
├── static/
├── svelte.config.js
├── package.json
├── README.md
└── vite.config.js

目录结构介绍

src/: 包含项目的源代码。
- lib/: 存放自定义的库文件。
- routes/: 包含应用的路由文件。
- app.html: 应用的模板文件。
- hooks.js: 定义应用的生命周期钩子。
static/: 存放静态资源文件，如图片、字体等。
svelte.config.js: SvelteKit 的配置文件。
package.json: 项目的依赖和脚本配置。
README.md: 项目的说明文档。
vite.config.js: Vite 的配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/routes/__layout.svelte 和 src/app.html。

`src/routes/__layout.svelte`

这是 SvelteKit 应用的布局文件，定义了整个应用的布局结构。

<script>
  import '../app.css';
</script>

<slot></slot>

`src/app.html`

这是应用的模板文件，包含了 HTML 的基本结构和一些全局设置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/favicon.png">
  <title>SvelteKit Starter</title>
</head>
<body>
  <div id="svelte"></div>
</body>
</html>

3. 项目的配置文件介绍

`svelte.config.js`

这是 SvelteKit 的配置文件，用于配置 SvelteKit 的各种选项。

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

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

export default config;

`vite.config.js`

这是 Vite 的配置文件，用于配置 Vite 的各种选项。

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

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()]
};

export default config;