How do I properly use Svelte file naming conventions ( page.svelte, etc.) to import component direct-CodePudding

i am just starting to use svelte and am confused with how to properly structure the project. As an example I want to seperate the webpage into Header, Body, and Footer sections.

By default the root page is called page.svelte. I created a layout.svelte and added <slot/>.

If I want to have a folder for each component the file structure will look something like:

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

Each page.svelte looks something like:

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

And 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>

My import statement are wrong, but aside from that, in general how do I ago about structuring components in a svelte project? How do I import them? Thanks!

EDIT:

just changed the import statements, in general I would still like to know how to structure svelte projects

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

CodePudding user response：

Each directory in your routes directory represents a new route, so you don't want to create a new directory for Header (which would result in a new route https://example.com/Header) and components of that nature.

You could put the Header.svelte and Footer.svelte components directly in the routes directory since they are only used there. If you have components that are reused throughout the application you could put them in e.g. src/lib/components instead.

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 />