项目结构

一个典型的 Qwik 项目看起来像这样

qwik-app-demo
├── README.md
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.ts

项目文件

src/routes/

src/routes/ 目录是一个特殊目录，Qwik City 将在其中查找您的页面。此目录中的文件夹和文件具有特殊含义，它们将映射到您的应用程序的 URL。

• src/routes/index.tsx 是您应用程序的主页。
• src/routes/layout.tsx 是您应用程序的根布局，所有页面都将在该布局内渲染。

有关更多信息，请参阅 路由 部分。

src/components/

名为 src/components/ 的目录遵循标准约定。它存在于所有 Qwik 启动器中，如果您愿意，可以重命名它。src/components/ 目录是放置您的组件（即可以在多个地方使用的可重用代码片段）的地方。这些组件不是路由或布局，但可以在您的路由或布局代码中引用它们。

例如，Button 组件应该位于 src/components/button/button.tsx 中。

public/

public/ 目录包含静态资源，例如图像、字体和图标。当您构建应用程序时，这些文件将被复制到 dist/ 目录并从根目录提供服务。

有关更多信息，请参阅 Vite 配置。

src/entry.ssr.tsx

SSR 入口点是所有在浏览器之外渲染应用程序的情况下的通用入口点。

• 服务器 (express, cloudflare...)
• npm run start
• npm run preview
• npm run build

src/root.tsx

src/root.tsx 文件是应用程序树的根。它是入口点，也是将要渲染的第一个组件。

src/global.css

src/global.css 文件是一个全局 CSS 文件，如果您需要定义一些在应用程序中多个地方使用的 CSS，可以在此处定义它。

根组件 (src/root.tsx) 默认导入此文件。

tsconfig.json

tsconfig.json 文件包含 TypeScript 编译器配置。它是任何 TypeScript 项目的标准配置。

vite.config.ts

Qwik 使用 Vite 构建项目。vite.config.ts 文件包含 Vite 配置。它是任何 Vite 项目的标准配置。有关更多信息，请参阅 Vite 文档。

实用程序

Qwik 具有一个名为 new 的实用程序命令，允许开发人员轻松创建新的组件和路由。

假设您想创建一个名为 Button 的新组件，您将运行以下命令

pnpm qwik new Button

也许您想为 /contact 页面创建一个新路由。为此，您可以使用以下命令

pnpm qwik new /contact

以下命令与 Qwik 的目录文件结构一致，使您可以更快地构建组件。

如果我们将页面顶部的 qwik-app-demo 与之进行比较，则附加更改将如下所示

qwik-app-demo
├── README.md
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   │       Button
│   │       └── button.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── contact
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.ts

如果您希望使用 Button/index.tsx 命名约定生成 Button 组件，则可以使用以下命令

pnpm qwik new --barrel Button

在这种情况下，src/components 文件夹将如下所示

src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   │       Button
│   │       └── index.tsx

此功能是在 Qwik v1.2 中添加的，使用旧版本的开发人员将看不到此功能。