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

  1. qwik-app-demo
  2. ├── README.md
  3. ├── package.json
  4. ├── public
  5. │   └── favicon.svg
  6. ├── src
  7. │   ├── components
  8. │   │   └── router-head
  9. │   │       └── router-head.tsx
  10. │   ├── entry.ssr.tsx
  11. │   ├── global.css
  12. │   ├── root.tsx
  13. │   └── routes
  14. │       ├── flower
  15. │       │   ├── flower.css
  16. │       │   └── index.tsx
  17. │       ├── index.tsx
  18. │       ├── layout.tsx
  19. │       └── service-worker.ts
  20. ├── tsconfig.json
  21. └── vite.config.ts

项目文件

src/routes/

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

  • src/routes/index.tsx 是您应用程序的首页。
  • src/routes/layout.tsx 是应用程序的根布局，所有页面都将在此布局内呈现。有关更多信息，请参阅路由部分。

src/components/

src/components/ 目录是一个按照约定的目录。所有 Qwik starters 都将具有此目录，但如果您愿意，可以更改它。此目录是您应该放置组件的位置，即可在多个地方重复使用的代码片段。它们不是路由或布局，但可以在其中使用。

例如，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 页面创建一个新的路由。要做到这一点，您可以使用以下命令：

  1. pnpm qwik new /contact

以下命令与 Qwik 的目录文件结构一致，可以帮助您更快地创建组件脚手架。

如果我们将顶部的 qwik-app-demo 与之前进行比较，额外的变化将如下所示：

  1. qwik-app-demo
  2. ├── README.md
  3. ├── package.json
  4. ├── public
  5. │   └── favicon.svg
  6. ├── src
  7. │   ├── components
  8. │   │   └── router-head
  9. │   │       └── router-head.tsx
  10. │   │       Button
  11. │   │       └── button.tsx
  12. │   ├── entry.ssr.tsx
  13. │   ├── global.css
  14. │   ├── root.tsx
  15. │   └── routes
  16. │       ├── flower
  17. │       │   ├── flower.css
  18. │       │   └── index.tsx
  19. │       ├── contact
  20. │       │   └── index.tsx
  21. │       ├── index.tsx
  22. │       ├── layout.tsx
  23. │       └── service-worker.ts
  24. ├── tsconfig.json
  25. └── vite.config.ts

如果您更喜欢使用 Button/index.tsx 命名约定生成 Button 组件，您可以使用以下命令：

  1. pnpm qwik new --barrel Button

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

  1. src
  2. │   ├── components
  3. │   │   └── router-head
  4. │   │       └── router-head.tsx
  5. │   │       Button
  6. │   │       └── index.tsx

此功能在 Qwik v1.2 中添加，使用较旧版本的用户将看不到此功能。