Svelte 中变量在模板中不可用，通常是因为 标签未置于组件顶层——它必须作为 Svelte 组件的根级脚本块存在，而非嵌入 HTML 的 或 内；否则将退化为普通浏览器脚本，无法参与响应式绑定。
svelte 中变量在模板中不可用，通常是因为 `<script>` 标签未置于组件顶层——它必须作为 svelte 组件的根级脚本块存在，而非嵌入 html 的 `<body>` 或 `<head>` 内；否则将退化为普通浏览器脚本，无法参与响应式绑定。</script>
在你提供的代码中，<script lang="ts"> 被错误地放置在 <body> 标签内部（且紧邻 <div class="header"> 之后），这导致 Svelte 编译器完全忽略该脚本块——它不会被识别为组件逻辑的一部分，因此声明的 items 变量对模板 {#each items as item} 来说是“未声明”的，编译时报错 Cannot find name 'items'。</script>
✅ 正确做法：Svelte 组件必须遵循严格的三段式结构（顺序可调，但必须独立、同级）：
<script lang="ts">
// ✅ 此处声明的变量/状态可在下方模板中直接使用
let items = [
{ name: "test" },
{ name: "potato" },
{ name: "io" }
];
</script><!-- ✅ 模板区域：支持 {#each}、bind:value、事件处理等 --><div class="header">
<a href="/"><b>Pot.Io</b></a>
<a href="/shop"><b>Shop</b></a>
<a href="/help"><b>Help</b></a>
</div>
<div class="cnt1">
{#each items as item}
<div class="item">
<h1>{item.name}</h1>
</div>
{/each}
</div>
<style>
/* ✅ scoped CSS：仅作用于当前组件 */
.header {
background-color: #Dcd517;
padding: 5px 5px 5px 20px;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
margin: 0;
}
.header a {
color: black;
padding: 20px;
text-decoration: none;
border-radius: 12px;
font-size: 32px;
}
.header a:hover {
background-color: #9d940e;
}
.cnt1 {
display: flex;
background-color: #127D0B;
padding: 8px 50px;
}
.item {
margin: 0 8px;
}
</style>
⚠️ 关键注意事项：
- 禁止在 或 中写 <script></script>：Svelte 不是 HTML 文件处理器，而是组件编译器。所有逻辑必须位于 .svelte 文件顶层 <script> 块中。</script>
- 样式应移至 ：内联
-
全局资源（如字体）请用 ：
<head><link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet"></head>
- 若需复用数据，推荐 export let items 作为 prop：适用于父组件传入数据的场景；而本例中 items 是本地状态，直接 let items = [...] 即可（Svelte 5+ 中建议配合 $state() 提升响应式可靠性，例如 let items = $state([{name: "test"}]);）。
总结：Svelte 的“魔法”依赖于其约定式结构。把 <script> 放回组件顶层，移除冗余 HTML 包裹，即可让变量自然暴露给模板——这是理解 Svelte 响应式模型的第一课，也是避免 90% 初学者编译错误的基石。</script>
