Структура проекта

Типичный проект 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, так как это каталог, в котором Qwik City будет искать ваши страницы. Папки и файлы в этом каталоге имеют особое значение, и они будут сопоставлены с URL-адресом вашего приложения.

• src/routes/index.tsx — домашняя страница вашего приложения;
• src/routes/layout.tsx — это корневой макет вашего приложения, все страницы будут отображаться внутри этого макета.

Дополнительную информацию см. в разделе Маршрутизация.

src/components/

Каталог src/components/ является каталогом по соглашению. Все стартовые шаблоны Qwik будут иметь этот каталог, но вы можете изменить его, если хотите. В этот каталог вы должны поместить свои компоненты, т. е. многократно используемые фрагменты кода, которые можно использовать в нескольких местах. Они не являются маршрутами или макетами, но их можно использовать внутри них.

Например, компонент Button должен находиться в файле src/components/button/button.tsx.

public/

Каталог public/ содержит статические ресурсы, такие как изображения, шрифты и иконки. Когда вы создаёте своё приложение, эти файлы будут скопированы в каталог dist/ и размещены в корневом каталоге.

Для получения дополнительной информации смотри раздел Конфигурация Vite.

src/entry.ssr.tsx

Точка входа SSR. Эта точка входа будет общей во всех случаях, когда приложение рендерится вне браузера.

• Server (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 с соглашением об именах вида Button/index.tsx, вы можете использовать команду:

pnpm qwik new --barrel Button

В этом случае папка src/components будет выглядеть так:

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

Эта возможность была добавлена в Qwik v1.2, и те, кто использует более старую версию, не увидят этой функциональности.