如何正确使用Svelte文件命名约定(+page. html) ?Svelte等)导入组件目录 &g

Question

我刚刚开始使用苗条，我对如何正确构建项目感到困惑。作为一个例子，我想把网页分成Header, Body和Footer三个部分。

根页面默认命名为+page.svelte。我创建了一个+layout.svelte并添加了<slot/>。

如果我想为每个组件创建一个文件夹，那么文件结构应该是这样的:

- routes
-- Footer
---- +page.svelte
-- Header
---- +page.svelte
-- Main
---- +page.svelte
-- +layout.svelte

每个+page.svelte看起来像:

<section id="Header">
Goodbye World OR Hello World OR Something else for MAIN section
</section>

和+layout.svelte

<script>
import Main from "./Main.svelte";
import Header from "./Header.svelte";
import Footer from "./Footer.svelte";
</script>

<section>
<header>
<Header/>
</header>
<section>
<Main/>
</section>
<footer>
<Footer/>
</footer>
</section>

我的import语句是错误的，但除此之外，总的来说，我是如何在一个苗条的项目中构建组件的?我如何导入它们?谢谢!

编辑:

只是改变了import语句，总的来说，我还是想知道如何构建苗条的项目

<script>
import Main from "./Main/+page.svelte";
import Header from "./Header/+page.svelte";
import Footer from "./Footer/+page.svelte";
</script>

Answer 1

routes目录中的每个目录都代表一条新路由，因此您不想为Header(这会导致新路由https://example.com/Header)和该性质的组件创建一个新目录。

您可以将Header.svelte和Footer.svelte组件直接放在routes目录中，因为它们只在那里使用。如果你有在整个应用程序中重用的组件，你可以把它们放在例如src/lib/components中。

routes/
├─ about/
├─ blog/
├─ +layout.svelte
├─ +page.svelte
├─ Header.svelte
├─ Footer.svelte

<!-- routes/+layout.svelte -->
<script>
import Header from "./Header.svelte";
import Footer from "./Footer.svelte";
</script>
<Header/>
<slot />
<Footer />