Разработка архитектуры масштабного приложения Vue.js

При разработке нового приложения у веб-программиста возникают следующие проблемы:

Как структурировать приложение для гибкости и масштабируемости;
Как обрабатывать http-вызовы;
Как добавить обработку исключений;
Как добавить логирование.

Папка src:
Папка app:
Модуль функций
Папка shared:
Заключение

Я разработал шаблон, который решает все эти проблемы и позволяет создать модульное, гибкое и масштабируемое приложение на Vue.js. Созданию этого шаблона и посвящена данная серия статей. Сегодня мы рассмотрим структуру приложения.

Я всегда стараюсь спроектировать front-end приложение в три уровня:

Уровень пользовательского интерфейса— компоненты пользовательского интерфейса приложения.
Бизнес-уровень— содержит бизнес-логику приложения, которую мы часто называем сервисами.
Состояние приложения— управление состоянием приложения.

Я нашел способы, которые позволяют упорядочить файлы в проекте, разместив их в папках в зависимости от типа и функций. Я применил эти идеи и создал структуру папок, которая соответствует моим потребностям.

На корневом уровне располагаются файлы и папки, созданные с помощью Vue CLI. А также файлы (.env и .env.production) для управления конфигурациями сред в приложении.

Папка src:

Каталог src включает в себя папку app, которая содержит исходный код приложения. Также здесь размещаются assets, environment и main.js

`assets`:

Содержит статические ресурсы и изображения.

`environment`:

Содержит файл environment.js. Должен быть общий interface, через который мы сможем получить или ограничить доступ к переменным среды.

plugins:

Плагины Vue.

`main.js`:

Этот файл отвечает за загрузку Vue-приложения.

Папка app:

В app размещаются папки с функциями. Она также будет содержать каталог shared с папками components, config, directives, filters, services и т.д. А также еще три файла:

`app-routes.js`:

Этот файл отвечает за объединение всей конфигурации маршрутов из модулей функций. Он также содержит маршруты уровня приложения.

`app-state.js`:

Файл конфигурации настроек, связанных с управлением состоянием. Например, соответствующая конфигурация Vuex. Все состояния из модулей функций будут объединены и настроены в этом файле с помощью системы управления состояниями.

`app.vue`:

Корневой компонент, который содержит основное представление приложения.

Модуль функций

Структура папок приложения разделена на основе функций с помощью модулей функций. Корневой модуль функций содержит компоненты вместе с тестами и папкой shared.

Каждый модуль функций также включает в себя routes, state и файл основного компонента. Например, в модуле функций user user-list и user-item — это компоненты. user-routes.js содержит пользовательский модуль routes. user-state.js объединит все состояния пользователя, а user.vue является основным компонентом этого модуля.

Папка shared:

Одна папка shared размещается на уровне приложения. У каждого модуля функций также собственная папка shared. Первая папка содержит содержать общие элементы уровня приложения, а вторая – элементы уровня модуля.

`components`:

Эта папка включает в себя общие компоненты, которые разделены на различные модули функций или компонентов. Например, Header, Footer, Navigation и т. д.

config:

Содержит связанные с API конфигурации, константы конфигурации и т. д.

directives:

Папка уровня приложения будет содержать общие директивы уровня приложения, а папка уровня модуля – уровня модуля.

filters:

Общие фильтры уровня приложения находятся в общей папке уровня приложения, а фильтры уровня модуля – в папке уровня модуля.

services:

Папка содержит бизнес-логику, утилиты или вызовы http, которые не зависят от логики пользовательского интерфейса. Большинство людей называют их utils, helpers или services. Я назвал их services.

state:

Папка уровня приложения хранит состояние, которое будет совместно использоваться различными модулями функций. Папка уровня модуля содержит состояние модуля функций.

Общее состояние уровня приложения позволяет реализовать отложенную загрузку и помещать все состояние приложения в функциональные модули. Поэтому модуль функций будет содержать состояние, которое будет доступно для этого модуля функций, а общее состояние уровня приложения будет частью общего состояния.

Пример шаблона на основе этой архитектуры доступен здесь.

Заключение

Рассмотренная в этой статье структура папок решает многие проблемы. И ее можно легко изменить, когда размер и сложность проекта увеличиваются.

Данная публикация представляет собой перевод статьи «Architect a large scale Vue.js Application» , подготовленной дружной командой проекта Интернет-технологии.ру