SvelteKit是一个官方支持的框架，围绕Svelte构建。它为Svelte应用添加了一些关键功能--如路由、布局和服务器端渲染--并使前端开发变得异常简单。
在本教程中，我们将对Svelte和SvelteKit进行一个初学者友好的观察，并建立一个简单的网络应用，显示假想用户的个人资料页面。在这一过程中，我们将看到SvelteKit所提供的所有主要功能。
让我们先来看看Svelte带来了什么。
与Svelte合作的好处
Svelte越来越受欢迎，这是有原因的。使用Svelte开发应用程序是基于编写可重用和独立的组件--类似于其他流行的JavaScript框架，如React。
最大的区别在于其构建时的编译--而不是对代码的运行时解释。换句话说，Svelte在构建过程中已经编译了你的代码，最终的捆绑包只包含你的应用程序实际需要的JavaScript。这就导致了快速的网络应用和小规模的捆绑。
其他框架只对你写的代码进行解析和捆绑，本质上是将组件树原封不动地运送到客户端。为了让浏览器能够解释它并更新用户界面，需要交付更多的代码，并在客户端完成额外的工作。(你可以在这里阅读React是如何处理这个过程的）。
除此以外，Svelte是一个适合初学者的理想框架。每个人只要知道如何编写HTML，如何用基本的JavaScript和CSS包含<style> 和<script> 标签，就可以开始编写Svelte组件。
那么，为什么我需要SvelteKit？
尽管Svelte本身就能给你带来很好的开发体验，但你仍需决定如何将你的应用程序交付给用户。传统的方法是使用你最喜欢的模块捆绑器，如webpack或Rollup，将你的代码捆绑到一个大的、胖的JavaScript文件中。然后，你会从一个非常基本的HTML文档中调用它，就像这样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
...
</head>
<body>
<!-- the entry point of your application -->
<div id="app" />
<!-- load the JavaScript that takes care of the rest -->
<script src="dist/bundle.js"></script>
</body>
</html>
虽然这绝对是合法的，但用户的体验可能并不理想。有许多接触点需要改进，这就是SvelteKit发挥作用的地方。
首先，SvelteKit不是向客户提供一个几乎是空的HTML文件，而是已经包含了你在第一次浏览页面时需要的所有HTML元素。这样做的好处是加快了页面加载速度，并促进了搜索引擎优化。SvelteKit有两种方式：预渲染和服务器端渲染。我将在下文中详细解释这两种方式。保持不变的是，一旦JavaScript被加载，它就会接管并启用单页应用程序的典型功能，如客户端路由。
SvelteKit与经典的单一JavaScript捆绑包之间的第二个明显区别是代码分割。SvelteKit不是在一个单一的Javascript文件中提供整个应用程序，而是将代码分割成独立的小块。每个小块代表你的应用程序的一个路线。例如，所有需要为/home 和/about 路由获取的东西都会在用户实际需要时被加载--如果你使用SvelteKit的预取功能（就像我们下面要做的那样），则会提前一点。
SvelteKit的另一个突出优点是，你可以决定你的应用程序在哪个部署环境中运行。现在，前端开发者有各种不同的平台可以运行应用程序。有用于简单静态文件的托管提供商，有更高级的无服务器选项，如Netlify，或可以执行Node服务器的服务器环境，等等。通过称为适配器的微小插件，你可以告诉SvelteKit为特定平台优化你的输出。这大大方便了应用的部署。
然而，SvelteKit最大的优势在于其易用性。当然，你可以通过所有这些功能从头开始手动设置你的构建过程，但这可能是乏味和令人沮丧的。SvelteKit让你尽可能的轻松，而体验这一点的最好方式就是实际使用它。
这就是为什么我们要创建一个简单的网络应用程序，以显示虚构用户的个人资料页面。在这个过程中，我们将更详细地了解我上面提到的所有功能。
前提条件
不需要任何知识，但对Svelte的一些经验可能会有帮助。文章 "Meet Svelte 3, a Powerful, Even Radical JavaScript Framework"提供了一个不错的介绍。
要使用SvelteKit，你需要在你的系统上有一个工作版本的Node。你可以使用Node版本管理器（nvm）来安装它。(你可以在这里找到一些安装说明)。
请注意，SvelteKit（在撰写本文时）仍处于测试阶段，一些功能可能会有变化。你可以在GitHub上找到本教程的所有代码。
开始使用
首先，我们启动一个新的SvelteKit项目。在你的终端中执行以下命令。
npm init svelte@next svelteKit-example-app
你会被问到几个问题，以便你可以定制你的项目。为了我们的目的，请回答以下问题。
- 哪个Svelte应用模板？-> SvelteKit演示应用程序
- 使用TypeScript组件 -> 不
- 添加ESLint进行代码提示？-> 没有
- 添加Prettier用于代码格式化？-> 否
这将加载一个SvelteKit开发环境，包括一个功能性的示例应用程序。
在你的项目路线中，现在有一些配置文件：你的package.json ，static 文件夹，以及src 文件夹。我们将主要在src 文件夹内工作。它有以下的结构。
src
├── app.css
├── app.html
├── global.d.ts
├── hooks.js
├── lib
│ ├── Counter
│ │ └── index.svelte
│ ├── form.js
│ └── Header
│ ├── index.svelte
│ └── svelte-logo.svg
└── routes
├── $layout.svelte
├── about.svelte
├── index.svelte
└── todos
├── _api.js
├── index.json.js
├── index.svelte
└── [uid].json.js
/src/app.html 文件是你的app-shell，一个最小的HTML页面，你的渲染的HTML将被插入其中，你的bundle文件将从这里链接。通常情况下，你不需要碰这个文件。如果你想的话，你可以插入一些应用范围内的元标签，但这不是必须的--你一会儿就会看到。
/src/routes 文件夹是你的应用程序的核心。这个文件夹中的文件定义了你的应用程序的路由。有两种类型的路由：pages 和endpoints 。pages 是Svelte组件，以.svelte 为扩展名。例如，一个名为/src/routes/test.svelte 的组件将在路由/test 。endpoints 是普通的JavaScript（或TypeScript）文件，使你能够生成HTTP端点来获取数据。
Svelte组件可以有子组件。例如，路由组件/src/routes/test.svelte 可以导入一个名为Button.svelte 的组件。你存储所有子组件的地方是/src/lib 文件夹。
让我们看看这一切是如何操作的。切换到新创建的目录，然后安装依赖项，以开发模式启动应用程序。
cd svelteKit-example-app
npm install
npm run dev -- --open
这将在一个新的浏览器标签中打开预先存在的示例应用程序。点击该应用程序，并确保它正在工作。
一些准备工作
尽管演示程序很好，但它包含一堆我们不需要的文件。让我们把这些东西去掉。
删除lib 文件夹中的内容。
rm src/lib/*
删除routes/todos 文件夹。
rm -rf src/routes/todos
我们可以不用演示应用程序的样式。在项目的根目录下，打开app.css ，用下面的内容替换。
:root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
body { margin: 0;}
最后，打开src/index.svelte ，并将内容替换为以下内容。
<main>
<h1>HOME</h1>
</main>
完成这些后，让我们开始构建我们的演示。
布局和客户端路由
正如我上面写的，路由文件夹中的每个Svelte组件都定义了一个路由。然而，有一个例外：布局组件，名为$layout.svelte 。这个组件包含的代码适用于你应用程序的每一个页面。
让我们打开现有的/src/routes/$layout.svelte 文件。它现在所做的只是导入一些应用范围内的CSS代码。<slot> 元素包裹了应用程序的其他部分。让我们把内容替换成以下内容。
<script>
import "../app.css";
</script>
<svelte:head>
<meta name="robots" content="noindex" />
</svelte:head>
<nav>
<a href=".">HOME</a>
<a href="/about">ABOUT</a>
</nav>
<slot />
<style>
nav {
padding: 1rem;
box-shadow: -1px 1px 11px 4px #898989;
}
a {
text-decoration: none;
color: gray;
margin-right: 1rem;
}
</style>
注意：如果你想让Svelte文件有语法高亮显示，你可以安装一些扩展。这个对VS Code有好处。
在这个例子中，我们使用了<svelte:head> 元素来定义元标签，这些标签将被插入到我们文档的<head> 。因为我们是在布局组件中做的，所以它将被应用到整个应用程序中。机器人标签只是一个例子。
此外，我们创建了一个导航条。这是布局组件的一个典型用例，因为它通常要在你的应用程序的每一页上显示。
导航条有两个链接：一个指向应用程序的根部--它已经有由/src/routes/index.svelte 组件提供的内容--另一个指向关于页面。关于页面也是由演示应用程序创建的。打开它并将其内容替换为以下内容。
<main>
<h1>ABOUT</h1>
<hr />
<div>A website to find user profiles</div>
</main>
<style>
main {
font-size: 1.5rem;
margin: 4rem;
padding: 2rem;
color: gray;
justify-content: center;
box-shadow: 4px 5px 11px 10px lightgray;
}
</style>
这个页面是非常基本的。我们包含了一些HTML并应用了一些样式。
让我们回到浏览器中，导航到新的页面。我们的修改应该已经可见，你应该看到类似这样的东西。
让我们在登陆页面和关于页面之间导航。你可能会意识到，改变页面并不会刷新整个应用程序。导航感觉很流畅，也很即时。这是因为SvelteKit开箱即应用客户端路由。尽管我们在导航条中使用了普通的<a> 标签，但SvelteKit将这些标签识别为内部链接，并使用其内置的客户端路由器拦截它们。
继续阅读《SitePoint上的SvelteKit新手指南》。
