|
|
|
На данный момент основными директориями в структуре проекта являются **universo-backend** и **universo-frontend**.
|
|
|
|
|
|
|
|
* **universo-backend** - директория, в которой находится весь backend проекта. Для backend мы используем систему управления контентом **Wagtail 5**, основанный на библиотеке Django. В данной директории находятся такие файлы:
|
|
|
|
|
|
|
|
1. ....
|
|
|
|
|
|
|
|
* **universo-frontend** - директория, в которой находится весь frontend проекта. Для frontend мы используем фреймворк **Quasar 2**, основанный на Vue.js. В качестве языка программирования мы используем **TypeScript**. Также для frontend мы используем игровой 2D фреймворк **Phaser 3**. В данной директории находятся такие папки:
|
|
|
|
|
|
|
|
1. `.vscode` - используется для хранения настроек Visual Studio Code. Это позволяет участникам команды иметь согласованный опыт разработки, независимо от их глобальных настроек VS Code. Здесь находятся файлы, такие как: -` extensions.json`\- Этот файл используется для указания рекомендуемых расширений, которые должны быть установлены для данного проекта;
|
|
|
|
|
|
|
|
* `settings.json`\- Этот файл используется для настройки параметров VS Code на уровне проекта. Это может включать в себя настройки форматирования кода, настройки линтера, настройки отладки и многое другое.
|
|
|
|
|
|
|
|
1. `public` - содержит файлы, которые будут служить статическими и доступными без изменений. Обычно здесь находятся такие файлы, как favicon.ico. В данной директории находятся такая папка:
|
|
|
|
|
|
|
|
* `icons` - содержит иконки, которые используются в нашем проекте.
|
|
|
|
|
|
|
|
1. `src` - основной каталог. Он содержит исходный код нашего приложения. В данной папке находятся такие папки, как:
|
|
|
|
- `App.vue` - корневой компонент нашего приложения. Он служит в качестве основного "контейнера", в который вставляются все остальные компоненты. Обычно здесь находится общий макет вашего приложения, включая такие вещи, как навигационные панели, боковые панели и т.д.;
|
|
|
|
- `env.d.ts` - файл используется для определения типов для переменных среды в нашем проекте TypeScript. Переменные среды обычно используются для хранения конфиденциальных данных, таких как ключи API, или настроек, которые могут изменяться в зависимости от того, в какой среде (разработка, тестирование, производство и т.д.) выполняется наше приложение;
|
|
|
|
- `quasar.d.ts` - файл используется для предоставления определений типов для Quasar Framework. Это позволяет TypeScript понимать структуру и типы, используемые в Quasar, что обеспечивает безопасность типов и автозаполнение кода при работе с Quasar;
|
|
|
|
- `shims-vue.d.ts` - файл используется для предоставления определений типов для файлов .vue. Поскольку файлы .vue не являются стандартными JavaScript или TypeScript файлами, этот файл "shim" позволяет TypeScript понимать, как обрабатывать файлы .vue. Это включает в себя определение типов для различных частей файла .vue, таких как шаблоны, скрипты и стили.
|
|
|
|
Здесь также находятся такие папки, как:
|
|
|
|
|
|
|
|
* `assets` - каталог, содержащий статические ресурсы, такие как изображения, стили и т.д.;
|
|
|
|
* `boot` - каталог, содержащий файлы, которые запускаются при загрузке вашего приложения. На данный момент эта папка пустая;
|
|
|
|
* `components` - каталог, содержащий Vue компоненты, которые мы можем использовать в своем приложении. В папке находятся файлы: `EssentialLink.vue` - этот компонент предназначен для представления ссылки в удобном и стилизованном виде, с возможностью добавления иконки; `models.ts` - файл, используется для определения интерфейсов или типов данных в TypeScript;
|
|
|
|
* `css` - каталог, содержащий глобальные CSS-файлы для нашего приложения. В папке находятся файлы: `app.scss` - файл используется для определения глобальных стилей нашего приложения. Это может включать в себя базовые стили для элементов HTML, таких как заголовки, абзацы, ссылки и т.д., а также любые пользовательские классы или стили, которые мы используем во всем приложении; `quasar.variables.scss` - файл используется для переопределения стандартных переменных SCSS, которые используются внутри Quasar Framework. Quasar использует эти переменные для определения цветов, размеров шрифтов, отступов и других аспектов дизайна во всем фреймворке. Переопределяя эти переменные, мы можем настроить внешний вид и ощущение нашего приложения на глобальном уровне;
|
|
|
|
* `layouts` - каталог, содержащий макеты для нашего приложения. Макет определяет, как расположены основные части нашего интерфейса;
|
|
|
|
* `pages` - каталог, содержащий компоненты страниц, которые используются роутером для отображения. На данный момент здесь три страницы:
|
|
|
|
* `ErrorNotFound.vue` - страница, появляющаяся у пользователя из-за какой-либо ошибки;
|
|
|
|
* `IndexPage.vue` - первоначальная страница нашего проекта;
|
|
|
|
* `PhaserTest.vue` - страница, которая содержит бесконечный холст с комплектующими для работы над собственным проектом пользователя;
|
|
|
|
* `router` - каталог, содержащий настройки маршрутизации для нашего приложения. В нем находятся файлы:
|
|
|
|
* `index.ts` - файл используется для создания экземпляра маршрутизатора Vue и настройки его с использованием маршрутов, определенных в routes.ts. Этот экземпляр маршрутизатора затем импортируется и используется в главном файле нашего приложения для включения маршрутизации;
|
|
|
|
* `routes.ts` - файл содержит определение всех маршрутов в нашем приложении. Маршрут состоит из пути (URL-адреса) и компонента, который должен быть отображен, когда пользователь переходит по этому пути;
|
|
|
|
|
|
|
|
Также стоит упомянуть о файлах, которые находятся в корневом пути universo-frontend:
|
|
|
|
|
|
|
|
* `.editorconfig` - файл используется для определения стиля кодирования для различных редакторов и IDE. Он помогает убедиться, что все участники проекта используют одинаковые настройки, такие как отступы, переводы строк и т.д.;
|
|
|
|
* `.eslintignore` - файл используется для указания файлов или папок, которые ESLint должен игнорировать при проверке кода на ошибки и несоответствия стилю;
|
|
|
|
* `.eslintrc.cjs` - файл содержит конфигурацию для ESLint, инструмента для обнаружения и исправления проблем в нашем коде;
|
|
|
|
* `.gitignore` - файл используется Git для определения, какие файлы или папки следует игнорировать в проекте;
|
|
|
|
* `.npmrc` - файл используется для настройки поведения npm. Он может содержать различные настройки, такие как реестр npm, используемый по умолчанию, настройки прокси и т.д.;
|
|
|
|
* `.prettierrc` - файл содержит конфигурацию для Prettier, инструмента для автоматического форматирования кода;
|
|
|
|
* `index.html` - основной HTML-файл нашего приложения. Он служит в качестве точки входа в наше приложение и обычно содержит корневой элемент, в который Vue.js вставляет наше приложение;
|
|
|
|
* `package-lock.json` - файл автоматически генерируется npm и содержит точные версии всех зависимостей вашего проекта. Это гарантирует, что установка зависимостей будет одинаковой на всех машинах;
|
|
|
|
* `package.json` - файл содержит информацию о вашем проекте и перечисляет его зависимости. Он также может содержать различные скрипты для выполнения задач, таких как сборка, тестирование и развертывание вашего приложения;
|
|
|
|
* `postcss.config.cjs` - файл содержит конфигурацию для PostCSS, инструмента для преобразования CSS с помощью JavaScript;
|
|
|
|
* `quasar.config.js` - файл содержит конфигурацию для Quasar Framework. Он позволяет настроить различные аспекты нашего приложения Quasar, такие как включенные функции, настройки сборки и т.д;
|
|
|
|
* `README.md` - файл содержит информацию о нашем проекте, такую как описание, инструкции по установке и использованию, информацию о лицензии и т.д.
|
|
|
|
* `tsconfig.json` - файл содержит настройки для TypeScript в вашем проекте. Он позволяет настроить различные опции компиляции TypeScript, такие как целевая версия ECMAScript, модули, строгий режим и т.д; |
|
|
\ Нет новой строки в конце файла |
