File Layout

Qwik City 的核心职责是提供一种简单、直观、高效的方式来为您的网站创建内容。 Qwik City 通过基于目录的路由来实现这一点。简而言之，您的目录布局(目录结构)决定了您网站的结构。

routes 目录

所有基于目录的路由信息都放在src/routes目录中。 这是 目录和文件命名约定 对您的站点有影响的 唯一目录。 （在所有其他目录中，目录名称对 Qwik City 没有任何意义。）

（src 目录下通常也包含 components，但其名称和位置对 Qwik City 没有任何意义）

简单的 routes 目录示例

──src/
  ├─components/          # Put your reusable components here.
  │ └─counter.tsx
  └─routes/              # Put your route-specific components here.
    ├─docs/
    │ ├─overview/
    │ │ └─index.mdx      # https://example.com/docs/overview
    │ └─index.mdx        # https://example.com/docs
    ├─index.tsx          # https://example.com/
    └─layout.tsx         # All nested pages use this layout

示例 Component

位于src/routes目录下的index.tsx要用默认导出。

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <>Hello World!</>;
});