Разработка архитектуры масштабного приложения Vue.js
При разработке нового приложения у веб-программиста возникают следующие проблемы:
- Как структурировать приложение для гибкости и масштабируемости;
- Как обрабатывать http-вызовы;
- Как добавить обработку исключений;
- Как добавить логирование.
Я разработал шаблон, который решает все эти проблемы и позволяет создать модульное, гибкое и масштабируемое приложение на 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:
Папка уровня приложения хранит состояние, которое будет совместно использоваться различными модулями функций. Папка уровня модуля содержит состояние модуля функций.
Общее состояние уровня приложения позволяет реализовать отложенную загрузку и помещать все состояние приложения в функциональные модули. Поэтому модуль функций будет содержать состояние, которое будет доступно для этого модуля функций, а общее состояние уровня приложения будет частью общего состояния.
Пример шаблона на основе этой архитектуры доступен здесь.
Заключение
Рассмотренная в этой статье структура папок решает многие проблемы. И ее можно легко изменить, когда размер и сложность проекта увеличиваются.