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

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

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

Я разработал шаблон, который решает все эти проблемы и позволяет создать модульное, гибкое и масштабируемое приложение на 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» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню