Svelte新手咨询：如何规划项目结构与正确使用+page.svelte导入组件

你当前的核心问题 #

你混淆了路由页面文件和普通UI组件的用途：routes目录下的+page.svelte是用来定义独立路由页面的（比如/Header会对应routes/Header/+page.svelte），而Header、Footer这类全局UI组件不该放在这里，也不该用+page.svelte命名。

通用Svelte项目结构（以SvelteKit为例） #

src/
├── routes/                # 路由页面专属目录
│   ├── +layout.svelte     # 根布局（全局复用的页面框架）
│   └── +page.svelte       # 首页内容（对应根路径/）
├── lib/                   # 通用工具、组件、逻辑库
│   └── components/        # 存放所有UI组件
│       ├── Header.svelte
│       ├── Footer.svelte
│       └── MainContent.svelte（可选，若需复用主体内容组件）
├── styles/                # 全局样式文件（如global.css）
└── app.d.ts               # 类型定义文件（TypeScript项目）

组件的正确导入方式 #

1. 布局文件与组件的关联

根布局+layout.svelte的作用是提供全局页面框架，通过<slot />插入当前路由页面的内容。你不需要单独导入"Main"组件，因为routes/+page.svelte的内容会自动通过<slot />渲染到布局中。

修正后的+layout.svelte代码：

<script>
  // 方式1：相对路径导入（从routes目录向上一级到src，再进入lib/components）
  import Header from '../lib/components/Header.svelte';
  import Footer from '../lib/components/Footer.svelte';

  // 方式2：使用SvelteKit别名$lib（推荐，无需关心相对路径层级）
  // import Header from '$lib/components/Header.svelte';
  // import Footer from '$lib/components/Footer.svelte';
</script>

<header>
  <Header />
</header>

<main>
  <slot /> <!-- 这里自动渲染当前路由的+page.svelte内容，比如首页的主体内容 -->
</main>

<footer>
  <Footer />
</footer>

2. 普通组件的编写

以Header.svelte为例，直接在src/lib/components下创建文件：

<section id="Header">
  <h1>网站标题</h1>
  <!-- 导航栏等内容 -->
</section>

3. 路由页面的内容

首页的主体内容写在routes/+page.svelte中：

<section id="Main">
  <p>Hello World！这是首页的主体内容</p>
</section>

关键规则总结 #

• 路由文件：仅在routes目录下使用+page.svelte、+layout.svelte等带+前缀的文件，对应具体的页面路径。
• UI组件：统一放在src/lib/components或src/components目录，用普通驼峰/大驼峰命名（如Header.svelte），避免使用+前缀。
• 导入路径：优先使用$lib别名简化导入，减少相对路径层级带来的维护成本。

内容的提问来源于stack exchange，提问作者jack8287