当前位置：首页 > news >正文

（一）SvelteKit教程：hello world

news 2025/7/1 15:58:39

sveltekit 的官方教程，在这里：Creating a project • Docs • SvelteKitCreating a project • Docs • SvelteKit

我们可以按照如下的步骤来创建一个项目：

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

之后你就可以通过访问：http://localhost:5173/ 来看到原始画面了。

这个 SvelteKit 代码主要做以下事情：

初始化一个变量 name 并将其值设置为 'hello ming'。
定义一个函数 handleClick，该函数在调用时将 name 的值修改为 'hello world'。
在页面中显示一个标题，标题内容包括 name 的当前值。
显示一段包含超链接的文本，指向 SvelteKit 的文档。
显示一个按钮，点击按钮时调用 handleClick 函数。
显示一个输入框，输入框的值绑定到 name 变量，允许用户直接修改 name 的值。

逐行解释如下：

<script>// 定义一个变量 name，并初始化为字符串 'hello ming'let name = 'hello ming';// 定义一个函数 handleClick，当调用该函数时，将变量 name 的值修改为 'hello world'const handleClick = () => {name = 'hello world';}
</script><div class="page"><!-- 显示一个标题，内容为 'Welcome to SvelteKit' 后跟变量 name 的当前值 --><h1>Welcome to SvelteKit {name}</h1><!-- 显示一段文本，包含一个指向 SvelteKit 文档的超链接 --><p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p><!-- 显示一个按钮，当点击按钮时调用 handleClick 函数 --><button on:click={handleClick}>Change Name</button><!-- 显示一个输入框，输入框的值绑定到变量 name，允许用户修改 name 的值 --><input type="text" bind:value={name}>
</div><style>/* 空的样式标签，可以在此处添加自定义样式 */
</style>

代码解释总结

变量和函数定义：

let name = 'hello ming';：定义一个可变的字符串变量 name，初始值为 'hello ming'。
const handleClick = () => { name = 'hello world'; }：定义一个箭头函数 handleClick，函数体内将 name 变量的值设置为 'hello world'。

HTML 结构和绑定：

<div class="page">：定义一个 div 容器，类名为 page。
<h1>Welcome to SvelteKit {name}</h1>：显示一个标题，标题中插入 name 变量的当前值。
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>：显示一段文本，包含一个超链接，指向 SvelteKit 的文档。
<button on:click={handleClick}>Change Name</button>：显示一个按钮，点击时调用 handleClick 函数，将 name 的值更改为 'hello world'。
<input type="text" bind:value={name}>：显示一个输入框，输入框的值绑定到 name 变量，用户在输入框中输入的值将实时更新 name 变量。