Как лучше организовать архитектуру приложения на Vue? кратко

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

Реализация:
Прежде всего, давайте поймем, какие компоненты необходимы для нашего проекта. Во-первых, мы различаем существование API, затем систему маршрутизации и, наконец, существование событий.

Таким образом, в системе уже есть все компоненты, чтобы прогрессировать динамично и быстро.

Ниже я представляю изображение, на котором вы можете увидеть структуру файлов / папок.

Пояснение:
Теперь мы проясним структуру проекта и ответим на несколько простых вопросов, таких как «почему именно этот проект?» и «как использовать правильную возможность?» иметь максимальный результат.

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

В папку « Core » включены те файлы, которые являются общими для всех модулей (например, вход пользователя / вход, язык страницы пользователя и т. Д.).

Структура модуля:
в папку « Components » включены все компоненты, принадлежащие данному модулю, которые будут иметь возможность работать через реквизиты и события.

В папку « Pages » включены все страницы этого модуля, которые будут иметь доступ к хранилищу, маршрутизатору и объекту окна.

В папке « Services » включены все сервисные файлы.

В папке « Routes » включены все маршруты, связанные с данным модулем.

В « Store » папки всех «vuex» файлы управления включены.

В папке « Test » находятся все тесты, связанные с данным модулем.

В итоге у нас есть файл с именем данного модуля в формате « vue », который является основным пунктом для входа в наш модуль.

Вывод: четкое хранение файлов (структурированное) оптимизирует развитие и понимание проекта. Спасибо за ваше доверие и поддержку. Я надеюсь, что статья была полезна для вас.