Skip to main content

现在你已经完成了 Svelte 的教程，可以开始编写自己的代码了。

下面两部分教程会聚焦在 SvelteKit，一个用于创建任何规模和用途的网页应用的成熟的框架。

如果你觉得信息量太大，缓不过来，还没准备好去看 SvelteKit 的教程，没关系！你可以只用目前学到的 Svelte 知识，而不必学习任何 SvelteKit 内容。只需要在终端中输入如下命令然后跟着提示走……

npm create svelte@latest

然后开始编辑 src/routes/+page.svelte 即可。等你准备好了，点一下下面的按钮，让我们继续旅程吧。

Next: SvelteKit 基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script>
	import { onMount } from 'svelte';
 
	let characters = ['🥳', '🎉', '✨'];
 
	let confetti = new Array(100)
		.fill()
		.map((_, i) => {
			return {
				character:
					characters[i % characters.length],
				x: Math.random() * 100,
				y: -20 - Math.random() * 100,
				r: 0.1 + Math.random() * 1
			};
		})
		.sort((a, b) => a.r - b.r);
 
	onMount(() => {
		let frame;
 
		function loop() {
			frame = requestAnimationFrame(loop);
 
			confetti = confetti.map((emoji) => {
				emoji.y += 0.3 * emoji.r;
				if (emoji.y > 120) emoji.y = -20;
				return emoji;
			});
		}
 
		loop();
 
		return () => cancelAnimationFrame(frame);
	});
</script>
 
{#each confetti as c}
	<span
		style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})"
		>{c.character}</span
	>
{/each}
 
<style>
	:global(body) {
		overflow: hidden;
	}
 
	span {
		position: absolute;
		font-size: 5vw;
		user-select: none;
	}
</style>
initialising