Vue шаг за шагом. Vue Router. Пример#1

10.03.2020

первая серия примеров

Вступление

Что это: сборник примеров с пошаговым и поэтапным построением web - приложения на Vue. Также построение простенького backend-а на Flask (python) для более ясного понимания как срастить backend и frontend. Основной упор примеров сделан не на то, как сделать формочку, табличку для одного объекта данных, какие библиотеки использовать (этого добра в интернете полно), а на то, как выстроить структуру приложения для безболезненного его дальнейшего развития. Серия примеров построена по принципу меньше слов, больше примеров. Не ожидайте подробных объяснений, придется немного разбираться самому.

Для кого: для тех, кто знаком с Vue, хотя бы поверхностно. Для тех, кто кроме «Hello world!» сделал небольшое приложение и имеет массу вопросов «Как?» и «Зачем?».

Что будет рассмотрено в плане применения возможностей Vue: роуты, компоненты, Vuex.Store, построение взаимодействий родительских и дочерних компонент, распределение обязанностей компонент, построение компонент на основе примесей (mixins), вычисляемые поля, компоненты для постраничного вывод данных с сортировкой, фильтром/поиском, работа с данными (CRUD), компоненты для создания адаптивной таблицы под desktop/mobile версии, построение и работа с формами, стандартизация работы с данными — как итог создание стандартной компоненты для табличного постраничного просмотра и редактирования данных, разбиение приложения на компоненты, работа с локальным хранилищем, динамическая загрузка компонент. Отдельными примерами будет сделан простой backend с использованием framewrk Flask. После чего будет доработано приложение на Vue для работы с backend-ом. В конце получим некий шаблон - заготовку для web - приложений на Vue. На этом будет закончена первая, базовая серия примеров. Работа с более сложной структурой данных будет рассмотрена в следующей серии примеров.

Что будем использовать: Vue, Vue Material, Bootstrap, Flask, SQLite.

Краткое описание

В этой серии примеров для Vue не будет использоваться система сборки проекта. Это сделано для упрощения работы с примерами. Скачал и смотри. Все компоненты легко могут быть переделаны во vue – файлы (vue - компоненты). Этим мы займемся в самом конце следующей серии примеров.

На первом этапе построения Frontend данные будут храниться в localstorage. Затем мы сделаем простой backend, который в конечном счете будет работать с базой SQLite. После чего переделаем наш Frontend для работы с реальным backend-ом. В процессе таких переделок будет продемонстрирована гибкость применяемых подходов. Именно четкое понимание структуры приложения и правильное его построение поможет в дальнейшем выполнять радикальные изменения в проекте избегая колоссальных трудозатрат.

На некоторых этапах Вы можете увидеть нагромождение кода, и некоторую алогичность. Просто дождитесь следующего примера. Иногда я это делал специально, чтобы стало ясно зачем, мы делаем так, как это будет в конце. Если Вам не интересен сам процесс разъяснения, и Вы хотите получить сразу финальный пример — ждите выхода финального примера #13. Но если у Вас возникнут вопросы типа «а чё афтар сделает так?», Вы будите сразу посланы на пример #1. Исключение — реальные критические замечания, коих я ожидаю от более опытных специалистов, чем я.

Удачи.

P.S. часть кода копипстилась с рабочих проектов и там могут «торчать непонятные хвосты». Пишите - буду править.

Все, что здесь изложено — это видение автора, сформированное его личным жизненным путем и ни в коем случае не должно рассматриваться как единственно правильная точка зрения. Это всего лишь пример, как можно сделать. Если Вам что-то не понравилось, я не виноват. Если Вы использовали мой приме, а в нем баг — сами виноваты. Нужно рефакторить чужой код. Не хочется рефакторить — страдайте.

Примеры можно использовать, по своему усмотрению в любых коммерческих и не коммерческих проектах. Разрешается переделывать и модифицировать примеры, компоненты и вообще любые составляющие этого курса в любых масштабах. Разрешается бесплатно распространять или передавать третьим лицам данный курс и его модификации, примеры и производные данных примеров. НЕЛЬЗЯ использовать данные примеры для платных курсов! НЕЛЬЗЯ продавать или выдавать данный курс или его фрагмент за свои работы.

Пример №1 из 13

Пример простого приложения с использованием роутов

В этом примере

Простой набросок приложения с четырьмя роутами. Главный файл приложения — app.js. В нем описаны:

• Общее хранилище Vuex.Store. Используется для хранения «общих» данных. Пока в нем только title.
• routes — собственно роуты. В роутах указываются компоненты которые будут отображаться на месте router-view
• и сам объект приложения.

Файл app-components.js содержит компоненты приложения. Да, пока все компоненты в одном файле. Да, потом мы увидим как это не удобно и разнесем компоненты в разные файлы. Пока их не много пусть будет так.

Компонент app-menu — рисует меню. Пока пункты меню прописаны жестко в компоненте.

Компонент default — стартовая страничка примера на котором будет отображаться описание и пояснение к примеру.

client, seller, product — компоненты, которые в будущем будут работать с разными данным.

Для просмотра примера откройте в браузере файл index.html

Примеры предполагают, что в конечном счете роутов может быть десятки и сотни. К примеру у одного проекта, которым я занимаюсь 168 роутов и проект продолжает расти и развиваться. Соответственно, компонент так же может быть достаточное количество. Для того, чтобы с этим справиться и не запутать себя нужно выстроить и передерживаться стандартов. Эти стандарты — ваше внутренне дело. Главное чтобы они были выработаны и их придерживаться. Те подходы которые будут представлены дальше в примерах — это легкий оттенок того, что существует в реалиях и сделаны для примера. Ваше видение и детали могут отличаться от предложенных в этих примерах.

Ссылки

Vue Router - https://router.vuejs.org/ru/

Vuex.Store - https://vuex.vuejs.org/ru/guide/

Резюме

В этом примере рассмотрено простое приложение с роутами. Показана взаимосвязь роутов и компонент. Рассмотрен пример использования общего для всех компонент хранилища данных Vuex.Store.

В следующем примере

Пример создания компонента с собственными данными.

Смотри также:

• Vue. Vue-router
• Vue. Свойство data. Основы компонент
• Vue. CRUD. Работа с данными
• Vue. Mixins (Примеси)
• Vue. computed свойства. Постраничный вывод данных
• Vue. Сортировка, поиск данных в таблицах
• Vue. Таблица - трансформер под настольные и мобильные версии
• Vue. Стандартная таблица. Минимизируем код
• Vue. Динамическая загрузка компонент
• Vue. Диалоги и Notifications
• Vue.Стандартный компонент для редактирования данных
• Vue. Разнообразие из кирпичиков
• Flask + Vue. Финальный пример