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