專案結構

典型的 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 中，使用舊版本的用戶將看不到此功能。