Разработка архитектуры масштабного приложения Vue.js
При разработке нового приложения у веб-программиста возникают следующие проблемы:
- Как структурировать приложение для гибкости и масштабируемости;
- Как обрабатывать http-вызовы;
- Как осуществлять управление состоянием;
- Как добавить обработку исключений;
- Как добавить логирование.
Я разработал шаблон, который решает все эти проблемы и позволяет создать модульное, гибкое и масштабируемое приложение на Vue.js. Созданию этого шаблона и посвящена данная серия статей. Сегодня мы рассмотрим структуру приложения.
Я всегда стараюсь спроектировать front-end приложение в три уровня:
- Уровень пользовательского интерфейса— компоненты пользовательского интерфейса приложения.
- Бизнес-уровень— содержит бизнес-логику приложения, которую мы часто называем сервисами.
- Состояние приложения— управление состоянием приложения.
Я нашел способы, которые позволяют упорядочить файлы в проекте, разместив их в папках в зависимости от типа и функций. Я применил эти идеи и создал структуру папок, которая соответствует моим потребностям.
На корневом уровне располагаются файлы и папки, созданные с помощью Vue CLI. А также файлы (.env и .env.production) для управления конфигурациями сред в приложении.
Папка src:
Каталог
srcappassetsenvironmentmain.jsassets:
Содержит статические ресурсы и изображения.
environment:
Содержит файл
environment.jsinterfaceplugins:
Плагины Vue.
main.js:
Этот файл отвечает за загрузку Vue-приложения.
Папка app:
В
appsharedcomponentsconfigdirectivesfiltersservicesapp-routes.js:
Этот файл отвечает за объединение всей конфигурации маршрутов из модулей функций. Он также содержит маршруты уровня приложения.
app-state.js:
Файл конфигурации настроек, связанных с управлением состоянием. Например, соответствующая конфигурация Vuex. Все состояния из модулей функций будут объединены и настроены в этом файле с помощью системы управления состояниями.
app.vue:
Корневой компонент, который содержит основное представление приложения.
Модуль функций
Структура папок приложения разделена на основе функций с помощью модулей функций. Корневой модуль функций содержит компоненты вместе с тестами и папкой shared.
Каждый модуль функций также включает в себя
routes, stateuseruser-listuser-itemuser-routes.jsroutesuser-state.jsuser.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» , подготовленной дружной командой проекта Интернет-технологии.ру