Создание мобильного веб-приложения с помощью Vue, Vuetify и Typescript

В этой статье рассматривается создание мобильного веб-приложения с нуля с использованием набора инструментов из экосистемы Vue. Мы создадим фиктивное приложение News. (Обновлено в декабре 2019 г. для Vuetify 2.x)

Мы собираемся использовать Vuetify 2 для компонентов материального дизайна и Vue Router для управления навигацией. Код будет написан на TypeScript.

В первой части этой статьи будет рассказано о создании оболочки приложения. В будущих статьях мы будем расширять функциональность и использовать Jest и Vue Test Utils для написания наших модульных тестов.

Код для этой статьи доступен в репозитории GitHub:
https://github.com/JonUK/vuetify-mobile-app

Создание проекта

Итак, без лишних слов, давайте создадим наш проект. Мы собираемся использовать Vue CLI 3, поэтому сначала убедитесь, что он установлен.

npm install -g @vue/cli

Затем мы можем использовать Vue CLI для создания нашего проекта.

vue create vuetify-mobile-app

Vue CLI проведет нас через создание нового проекта и подскажет нам несколько вопросов. Мы вручную выберем функции, включая Babel, TypeScript, Router, Vuex и модульное тестирование:

Для остальных параметров мы будем использовать значения по умолчанию, отличные от решения для модульного тестирования, в котором мы будем использовать Jest.

На этом этапе Vue CLI сработает как волшебство и создаст для нас проект и установит все зависимости npm. Отсюда мы можем запустить веб-сайт из нового каталога проекта.

cd vuetify-mobile-app
npm run serve

Переход по адресу http: // localhost: 8080 / в браузере показывает нашему сайту всю его красоту!

Установка Vuetify

Vuetify - это фантастическая структура компонентов, которая позволит нам создать великолепно выглядящее приложение, составив вместе несколько существующих компонентов. Мы установим Vuetify как плагин.

vue add vuetify

Теперь, если мы запустим сайт, мы увидим, что нам удалось улучшить Vuetify!

После установки Vuetify мне нужно было настроить src/shims.vue.d, чтобы изменить способ ссылки на типы Vuetify. Этот сбой может быть устранен к тому моменту, когда вы прочтете это, но если вы столкнетесь с той же проблемой, я решил ее, добавив следующий код внизу src/shims.vue.d.

Мне также нужно было установить значок шрифта Material Design:

npm install --save material-design-icons-iconfont

Затем импортируйте это в плагин Vuetify src/plugins/vuetify.ts со строкой:

import 'material-design-icons-iconfont/dist/material-design-icons.css'

Компонент верхней панели инструментов

Первый компонент, который мы собираемся создать, - это компонент панели инструментов для отображения в верхней части приложения.

Создайте однофайловый компонент (SFC) Vue с именем TopToolbar.vue в папке src/components.

По сути, мы объединили компоненты панели инструментов Vuetify v-app-bar и панели навигации v-navigation-drawer в наш собственный компонент. Значок «гамбургер-меню» переключает отображение панели навигации, которая содержит две фиктивные записи «Настройка» и «Справка» вместе с соответствующими значками.

В коде TypeScript мы определяем класс TopToolbar и используем декоратор @Component, чтобы указать, что класс является компонентом Vue. Класс содержит свойство showMenu, которое имеет логическое значение. Это эквивалент свойства объекта данных при использовании Vue с JavaScript. Класс также содержит метод toggleMenu для скрытия и отображения панели навигации.

В шаблоне атрибуты app и fixed гарантируют, что панель инструментов отображается как часть макета приложения (а не как часть общего содержимого), что означает, что наша панель инструментов будет отображаться в верхней части области просмотра.

Компонент v-app-bar содержит атрибут color="primary", который устанавливает для панели инструментов основной цвет темы Vuetify, по умолчанию синий. Более подробную информацию о темах можно найти на сайте документации Vuetify.
https://vuetifyjs.com/en/framework/theme

Vuetify использует файл шрифта, который содержит все значки Material Design. Полный спектр доступных значков Material Design и их названия можно найти на сайте Google Material Design.
https://material.io/tools/icons

Размещение имени значка внутри тега <v-icon></v-icon> - это все, что нужно для отображения значка.

При создании компонентов Vue рекомендуется всегда использовать два или более слов для имени вашего компонента. Это предотвратит создание компонента, который конфликтует с существующими и будущими элементами HTML.
https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

Нижний компонент навигации

Основная навигация, которую мы будем использовать в нашем приложении, - это нижнее меню навигации. Размещение основной панели навигации в нижней части экрана идеально подходит для мобильных приложений, так как меню можно легко открыть с помощью взаимодействия одной рукой или одним большим пальцем.

Создайте файл с именем BottomNav.vue в папке src/components.

Это определяет три пункта меню «Главные новости», «Примеры кода» и «Избранное», которые мы будем иметь в нашем приложении. Атрибуты app и fixed снова означают, что нижняя навигационная панель является частью макета приложения, что означает, что она будет отображаться в нижней части области просмотра.

На данный момент изменение активного пункта меню ничего не дает. Позже мы еще вернемся к этому компоненту и с помощью роутера реализуем навигацию.

Создайте оболочку приложения

Теперь мы создали компоненты TopToolbar и BottomNav, давайте действительно будем использовать их в App.vue.

Теперь, когда мы просматриваем сайт, мы видим в действии два наших новых компонента.

Обратите внимание, что все компоненты Vuetify должны содержаться в v-app компоненте, чтобы они отображались и работали правильно.

Добавить компоненты просмотра

Наше приложение начинает хорошо обретать форму, но у нас все еще нет контента, который можно было бы показать пользователю, когда он перемещается по элементам нижнего меню навигации. В проекте у нас есть папка src/views, и именно здесь мы будем размещать компоненты, которые действуют как представления и к которым осуществляется переход.

Создайте три компонента TopStories.vue CodeExamples.vue и MyFavorites.vue в папке src/views с приведенным ниже кодом в каждом, настроив заголовок для каждой страницы.

Нам не нужно, чтобы эти компоненты содержали какой-либо код, поэтому мы можем безопасно опустить тег <script></script>.

Теперь нам нужно обновить маршрутизатор, чтобы он знал о каждом из этих компонентов, и создать маршрут с path и name для каждого компонента представления. Измените файл index.ts в папке router на:

Теперь, когда маршруты установлены, давайте обновим компонент BottomNav, чтобы каждый элемент ссылался на маршрут в маршрутизаторе с помощью :to prop.

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

Последний шаг - обновить App.vue <template></template>, чтобы добавить тег <router-view></router-view>, который действует как цель, где визуализируется компонент представления для текущего маршрута.

Поздравляю! Приложение News теперь использует маршрутизатор для навигации между различными компонентами просмотра. Вы должны немедленно остановиться и отпраздновать свое безумное мастерство!