Вступление

В Приложение для управления задачами с использованием Vue.js - Часть 1 мы обсудили, как разбить более крупный пользовательский интерфейс на более мелкие компоненты вместе с подходами top-down и bottom-up. Кроме того, мы обсудили, как создавать повторно используемые компоненты с использованием слотов и использования Vuex в контексте приложения.

Из этой статьи вы узнаете,

  • Как реализовать проверку формы
  • Создание и использование плагина Vue.js
  • Как оптимизировать пакет приложений для производственного развертывания
  • Где и как развернуть ваше приложение

Что мы будем строить

Вот скриншот готового приложения.

Демонстрация приложения

Репозиторий Github

Проверка формы

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

Для проверки формы на стороне клиента в экосистеме Vue существуют хорошо протестированные библиотеки. Библиотеки, такие как Vuelidate, Vee-validate, весьма полезны для интеграции проверки формы с помощью всего нескольких строк кода.

Чтобы реализовать проверку формы в этом приложении, я использовал библиотеку Vee-validate. Самый простой способ настроить Vee-validate - это импортировать и зарегистрироваться в Vue, используя Vue.use() соглашение, как показано во фрагменте кода ниже.

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

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

Мы используем формы для следующих операций,

  • Создать и обновить доску задач
  • Создайте и обновите список задач и
  • Создать и обновить элемент списка задач

Давайте посмотрим, как используется vee-validate в TaskListEdit компоненте ниже.

В компоненте TaskListEdit мы используем правило required с директивой v-validate. Обратите внимание, что мы используем правило проверки непосредственно в шаблоне с директивой vee-validate (т.е. vee-validate="'required'"). Следовательно, мы должны заключить необходимое правило проверки в одинарные кавычки.

При желании вы также можете использовать формат объекта для написания правила проверки. В этом случае синтаксис будет похож на v-validate="{ required: true }".

Синтаксис объекта обеспечивает более чистый подход, когда у вас есть несколько правил проверки или вы хотите динамически добавлять или удалять правила проверки в форме. Подробнее о синтаксисе можно прочитать в документации vee-validate.

Помимо директивы vee-validate, мы также используем атрибут data-vv-as для предоставления читаемого имени поля (например, имени списка), используемого для отображения ошибки проверки. Обратите внимание, что для правильной работы data-vv-as требуется атрибут name в поле ввода.

Мы используем HTML-тег small с errors.first("fieldName"), чтобы отображать ошибки проверки для поля. Объект errors предоставляется библиотекой vee-validate для доступа к ошибкам проверки. Ниже приведен синтаксис, показывающий ошибку проверки.

<small class="text-danger" style="display: block">
{{ errors.first("fieldName") }}
</small>

Наконец, мы изменяем поведение кнопки Save List по умолчанию, используя модификатор prevent для события @click, который предотвратит отправку формы и полное обновление страницы при нажатии кнопки.

Теперь, когда мы поняли разметку, необходимую для работы vee-validate. Давайте посмотрим на метод handleTaskListSave в компоненте.

Поскольку vee-validate импортируется и регистрируется глобально, его validator API на основе обещаний доступен для всех компонентов. Приведенный выше фрагмент кода проверяет форму, а затем предоставляет результат проверки с помощью параметра result для дальнейшей обработки.

Если проверка прошла успешно, мы вызываем saveTaskList действие Vuex со всеми необходимыми данными, а затем закрываем всплывающее окно. А если проверка не удалась, vee-validate отобразит ошибки в форме, и всплывающее окно останется открытым.

Это все, что нам нужно сделать для проверки форм с помощью vee-validate.

Vee-validate - отличная библиотека для проверки на стороне клиента с обширной документацией и рабочими примерами на codeandbox. Он не зависит от фреймворка CSS, поэтому вы можете отображать ошибки, как хотите. В общем, это делает проверку формы довольно простой с очень небольшими изменениями в разметке.

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

Если в этом случае вы создаете многоязычное приложение, довольно просто подключить vue-i18n плагин к v-validate, чтобы отображать сообщения проверки на основе настроенного и поддерживаемого приложением языкового стандарта. Вы можете использовать dictionary api для предоставления настраиваемых сообщений проверки. Подробнее об этом читайте в документации vee-validate.

В приложении осталась последняя часть головоломки, а именно включение и отключение функций с помощью обнаружения устройства. Итак, давайте обсудим это в следующем разделе.

Обнаружение устройства

Вы можете использовать медиа-запросы CSS для обнаружения области просмотра устройства в компоненте Vue <template>. Однако это становится немного сложнее, когда дело доходит до обнаружения устройства в компоненте Vue <script>. Теперь представьте, нужно ли вам обнаруживать устройство в нескольких или нескольких местах в приложении.

Вы определенно не хотите реплицировать логику повсюду, или даже если вы извлечете логику в скрипт, вам все равно придется импортировать скрипт в нескольких местах. Вот здесь и пригодятся плагины Vue.js.

По определению, плагин Vue.js добавляет определенные функции, доступные во всем мире. Плагин Vue может добавлять,

  • Глобальные методы или свойства
  • Один или несколько глобальных ресурсов, таких как директивы / фильтры / переходы и т. Д.
  • Параметры компонентов по глобальным миксинам
  • Методы экземпляра Vue, прикрепив их к Vue.prototype

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

В нашем случае я хотел обнаружить устройство (настольный компьютер, ноутбук и мобильное устройство) и на основе этого включить и отключить функцию перетаскивания в приложении.

Чтобы реализовать обнаружение устройства, я позаимствовал код из плагина nuxt-device-detect и создал плагин vue.js с небольшими изменениями.

В приведенном выше фрагменте кода плагин регистрирует mixin в экземпляре Vue и предоставляет вычисленные свойства isMobile, isMobileOrTablet, isTablet, isDesktop, isIos, которые будут доступны для всех компонентов.

// plugins/index.js
import Vue from "vue"
import DeviceDetect from "./device-detect"
Vue.use(DeviceDetect)

Приведенный выше фрагмент кода импортирует и регистрирует плагин DeviceDetect с использованием синтаксиса Vue.use(DeviceDetect).

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

В приведенном выше фрагменте из компонента TaskBoard я использовал свойство disabled компонента draggable для включения и отключения поведения перетаскивания. Вычисленное свойство shouldAllowListOrder использует вычисленные свойства isDesktop и isTablet, которые доступны через плагин device-detect.

Если пользователь находится на настольном компьютере или планшете, тогда свойство shouldAllowListOrder вернет true, в противном случае оно вернет false, что позволяет включать или отключать функцию перетаскивания в зависимости от устройства.

Мы используем аналогичную концепцию в TaskList компоненте, чтобы отключить перетаскивание элементов на мобильных устройствах и включить его на настольных и портативных устройствах.

Функция тестирования на устройствах

Самый быстрый способ протестировать эту функцию локально на устройствах - запустить проект, используя npm run serve, как показано на снимке экрана ниже, и использовать Network URL-адрес на рабочем столе, планшете и мобильных устройствах. Это самый простой способ локально протестировать особенности устройства перед развертыванием проекта в Интернете.

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

В этом приложении функция обнаружения устройств представляет собой идеальный вариант использования настраиваемого плагина, но вы также можете использовать плагины, чтобы сделать внешние библиотеки, такие как axios.js, moment.js и т. Д., Доступными для всех компонентов.

Теперь, когда мы рассмотрели все необходимые концепции, используемые в этом приложении. Давайте обсудим оптимизацию пакетов.

Оптимизация пакета

Создавать приложения с использованием Vue довольно просто, а при наличии множества библиотек компонентов и служебных программ всегда возникает соблазн быстро установить и сразу же использовать их.

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

Хотя существуют различные способы оптимизации пакета приложений, однако в контексте этого приложения мы рассмотрим следующее:

  • Оптимизация пакета CSS
  • Оптимизация пакета от поставщика

Например, без какой-либо оптимизации, когда вы создаете приложение с использованием npm run build, тогда общий размер пакета приложения составляет ~ 525 КБ до Gzip.

Теперь давайте посмотрим, как мы можем оптимизировать пакет CSS.

Оптимизация пакета CSS

Размер упакованного CSS-кода приложения составляет ~ 140 КБ. Это потому, что мы используем Bootstrap CSS Framework v4.3.1 и без какой-либо оптимизации пакет CSS будет включать всю структуру CSS.

Мы можем использовать пакеты purgecss и postcss-purgecss для удаления неиспользуемых классов из пакета CSS. purgecss отлично работает с postcss библиотекой, которая используется Vue-CLI для внутренних целей.

Пакеты purgecss и postcss-purgecss следует устанавливать как зависимость разработки, чтобы гарантировать, что они используются только для сборки приложения.

$ npm i -D purgecss @fullhuman/postcss-purgecss

После установки я изменил postcss.config.js в корневой папке, чтобы настроить postcss для использования purgecss, оставить только используемые классы и исключить остальные из окончательного пакета CSS.

const purgecss = require("@fullhuman/postcss-purgecss")
module.exports = {
 plugins: [
  //Only add purgecss in production
  process.env.NODE_ENV === "production"
   ? purgecss({
      content: ["./src/**/*.vue"]
     })
   : ""
 ]
}

Приведенный выше код гарантирует, что purgecss будет работать только в производственном режиме, и он проверит все .vue файлы на наличие классов CSS и исключит любые неиспользуемые классы.

Теперь, после настройки purgecss, когда я создаю проект с использованием npm run build, размер пакета CSS уменьшается до 13,08 КБ с 140,26 КБ.

Это огромная экономия ~ 127 КБ только на размере пакета CSS!

Но все же размер пакета нашего поставщика JavaScript немного больше, поэтому я использовал анализатор пакетов приложений, чтобы найти, какие библиотеки отвечают за больший размер пакета JS. Таким образом, я могу исследовать и выяснить, как уменьшить их влияние в нашем приложении.

Оптимизация пакета поставщика

Посмотрев на комплект поставщика в анализаторе, я решил, что библиотека vee-validate включена полностью. Когда мы импортируем и регистрируем библиотеку Vee-validate, используя следующий код, и он включает всю библиотеку в комплект поставщика.

Но есть лучший способ включить Vee-validate в наше приложение. Я создал отдельный файл плагина, чтобы упорядочить код, связанный с импортом и регистрацией vee-validate.

В приведенном выше коде мы импортируем только методы Validator и install из vee-validate.minimal.esm.js, а затем снова импортируем только required правило проверки из rules.esm.js. Вместо импорта всех определенных локалей мы специально импортируем en локаль для сообщений проверки.

После импорта мы просто подключаем правила проверки и языковой стандарт с vee-validate и, наконец, регистрируем VeeValidate с помощью Vue с помощью команды Vue.use(VeeValidate).

Теперь давайте запустим сборку еще раз и увидим разницу.

После оптимизации, связанной с vee-validate, размер пакета нашего поставщика уменьшился до ~ 300 КБ с ~ 347 КБ. Это дает нам экономию ~ 47 КБ в размере пакета поставщика.

По сравнению с тем, где мы начали с общим размером пакета ~ 525 КБ, теперь мы уменьшили общий размер пакета до ~ 350 КБ.

После оптимизации мы сохранили ~ 174 КБ в общем размере пакета, и это определенно ускорит загрузку нашего приложения при более медленных соединениях.

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

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

Разверните ваше приложение

Пока вы разрабатываете приложение, вы можете развернуть его на сервере разработки или промежуточном сервере, чтобы протестировать. На этом этапе у вас есть возможность развернуть приложение на своем частном сервере веб-хостинга или воспользоваться услугами облачного хостинга, такими как Netlify, Surge.sh, heroku, zeit.co, Amazon Web Services. »Или даже лазурь .

В контексте этого приложения мы обсудим развертывание приложения в Surge.sh, а также рассмотрим настройку непрерывного развертывания Netlify.

Помните, что Surge.sh - это исключительно платформа для развертывания статических веб-сайтов или приложений. В то же время Netlify имеет гораздо более богатый набор функций, таких как непрерывное развертывание, формы, глобальный CDN, бессерверные функции и многое другое.

Разверните на Surge.sh

Если вы не установили всплеск, я рекомендую вам установить его глобально, чтобы вы могли легко развернуть любое приложение vue.js на Surge.sh.

// To install surge globally
$ npm install -g surge

После его установки запустите surge login в терминале, чтобы войти или создать бесплатную учетную запись.

Чтобы упростить быстрое развертывание с терминала, я собрал несколько дополнительных команд (deploy и deploy-staging) в package.json, чтобы создать приложение, а затем беспрепятственно развернуть его в surge.sh.

Команда deploy npm создаст приложение с использованием vue-cli-service, переключится в каталог dist, а затем с помощью команды surge CLI развернет приложение в Surge.sh. Вы можете выполнить следующую команду, чтобы развернуть свое приложение.

$ npm run deploy

deploy-staging Команда npm делает то же самое, за исключением того, что она настроена для развертывания приложения по другому URL-адресу.

npm run deploy-staging

Обратите внимание, что вам нужно будет изменить URL-адрес развертывания. Если вы хотите развернуть на Surge.sh.

Настройка непрерывного развертывания с netlify

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

При непрерывном развертывании Netlify настроит веб-перехватчики с выбранным вами поставщиком Git (Github, Gitlab, BitBucket), чтобы получать уведомления о коммитах в вашем онлайн-репозитории Git.

Когда вы отправляете новую фиксацию в онлайн-репозиторий git, Netlify получает уведомление от webhook / s, которое запускает Netlify ботов, которые извлекают ваш последний код, а затем создают и развертывают приложение.

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

Шаги по настройке непрерывного развертывания

Прежде чем двигаться дальше, убедитесь, что вы создали онлайн-репозиторий на Github, Gitlab или BitBucket и разместили последний код в репозитории.

Теперь перейдите на netlify.com и создайте свою учетную запись. Если у вас уже есть учетная запись, пропустите этот шаг.

После входа в Netlify вы можете использовать кнопку New site from Git для создания сайта из вашего репозитория.

После того, как вы нажмете кнопку, Netlify проведет вас через трехэтапный процесс настройки вашего сайта.

Шаг 1. Подключитесь к провайдеру Git

На картинке ниже вы можете выбрать поставщика Git, у которого вы создали репозиторий кода. Netlify затем аутентифицируется у провайдера Github и запрашивает вашу авторизацию с необходимыми разрешениями.

Шаг 2. Выберите репозиторий

После авторизации Netlify вы можете выбрать репозиторий, который хотите развернуть. В моем случае я выбрал task-management-app репозиторий.

Шаг 3. Параметры сборки и развертывание

На этом этапе мы настроим параметры сборки непрерывного развертывания.

Вы можете выбрать ветку, которую хотите развернуть. По умолчанию Netlify считает ветку master как production. Что касается настроек сборки, я использую npm run build в качестве команды сборки и использую папку dist для развертывания.

По завершении этого шага Netlify настроит веб-перехватчики для выполнения следующих действий в этом точном порядке.

  • чтобы получить информацию о фиксации от поставщика Git,
  • чтобы вытащить ваш код из репозитория Git и собрать его и
  • чтобы развернуть его на новом сайте со случайным именем.

Изменить название сайта

Чтобы дать сайту более понятное имя, перейдите в раздел settings->site details и нажмите кнопку Change site name.

Это все, что вам нужно сделать, чтобы настроить непрерывное развертывание с Netlify.

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

Разверните еще одну ветку Git

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

После настройки, когда вы фиксируете ветку development, Netlify извлечет код из ветки development, а затем автоматически построит и развернет его для вас.

На основе настроенного имени сайта и выбранной ветки вы получите URL-адрес сайта для ветки. URL-адрес сайта филиала имеет определенный формат.

https://<branch-name>--<site-name>.netlify.com

Например: если имя вашего филиала - development, а имя сайта - task-management-app, то URL развертывания будет таким:

https://development--task-management-app.netlify.com

Конфигурация сборки через netlify.toml

Помимо предоставления настроек сборки при создании сайта, вы также можете создать Netlify файл конфигурации netify.toml в корневой папке проекта. Этот файл используется для переопределения параметров сборки и развертывания и предоставления дополнительных параметров конфигурации сайта Netlify build-ботам.

Вот пример файла netlify.toml, используемого в нашем проекте.

В файле netlify.toml есть разделы build и redirects. В разделе сборки мы предоставляем command для сборки проекта и publish для предоставления каталога для публикации. Разделredirects используется для определения правил перенаправления для веб-сайта. Вот документация по netlify.toml файлу.

Развертывание приложений на Surge.sh очень просто и отлично подходит для статических сайтов, личного портфолио, прототипов, демонстраций и т. Д.

Напротив, Netlify предлагает полноценную платформу для ваших приложений с гораздо более совершенным опытом разработчика. Netlify подходит, если вы разрабатываете приложение для хобби или приложение корпоративного уровня. После развертывания этого приложения на Surge.sh и Netlify мне понравился беспроблемный опыт разработчика, предлагаемый Netlify, с непрерывным развертыванием приложения прямо из репозитория Git.

Заключение

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

Когда нам нужно было, чтобы данные приложения были разделены между несколькими компонентами, мы использовали Vuex для управления состоянием общих данных в масштабе приложения. В дополнение к шаблону EventBus для упрощения взаимодействия компонентов в приложении мы также использовали слоты для создания повторно используемых компонентов.

В контексте приложения мы обсудили реализацию функции перетаскивания, проверки формы с помощью Vee-Validate, настраиваемого плагина Vue.js для обнаружения устройств, оптимизации пакетов и развертывания приложения в Surge.sh и Netlify с конвейером непрерывного развертывания. для оптимизации рабочего процесса разработки.

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

Если вы пропустили ссылку на код вышеупомянутого приложения, вот Репозиторий Github.

Если вы новичок и хотите лучше понять Vue.js, прочтите Компонентное мышление с помощью Vue.js.

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

Также не забывай подписаться на меня в твиттере @_shirish.