Skip to main content

Bạn đã hoàn thành hướng dẫn Svelte! Bây giờ bạn đã sẵn sàng bắt đầu xây dựng ứng dụng cho mình với svelte.

Hai phần tiếp theo của hướng dẫn sẽ tập trung vào SvelteKit, một framework đầy đủ cho việc tạo ra ứng dụng đa dạng.

Nếu bạn cảm thấy có quá nhiều thông tin hoặc chưa sẵn sàng để bắt đầu hướng dẫn SvelteKit, đừng lo lắng! Bạn có thể sử dụng kiến thức Svelte hiện tại mà không cần học hết SvelteKit ngay. Chỉ cần chạy lệnh sau trong terminal và làm theo hướng dẫn...

npm create svelte@latest

...và bắt đầu chỉnh sửa tệp src/routes/+page.svelte. Khi bạn sẵn sàng, hãy nhấp vào liên kết dưới đây để tiếp tục hành trình học tập của bạn.

Tiếp theo: SvelteKit cơ bản

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