РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЙ

Мои любимые компоненты Vue

Используйте компоненты повторно, чтобы быстрее начать работу!

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

Прежде чем идти дальше, позвольте мне упомянуть, что awesome-vue - это отличный список замечательных ресурсов для всего, что связано с Vue. Он имеет обширный список компонентов и библиотек компонентов, утилит, проектов с открытым исходным кодом, использующих Vue, учебных пособий, книг, статей в блогах, курсов и т. Д., Связанных с Vue. Так что, если вы ищете что-то конкретное и оно существует, вы, скорее всего, найдете это упоминание в awesome-vue. А теперь приступим.

Бутстрап

Первая проблема, которую необходимо решить при разработке интерфейсного приложения, - это выбрать подходящую структуру CSS для разработки адаптивных веб-сайтов, ориентированных на мобильные устройства. Мой личный выбор - Boostrap. BootstrapVue - отличное связывание Bootstrap для Vue.js. Эта библиотека компонентов включает в себя широкий спектр компонентов (на основе соответствующих компонентов Bootstrap). Некоторые из наиболее часто используемых включают предупреждения, значки, хлебные крошки, кнопки, календари, карточки, карусели, диалоговые окна, раскрывающиеся списки, формы, изображения, jumbotron, таблицы, вкладки, тосты и всплывающие подсказки.

Базовая компоновка пользовательского интерфейса выполняется с использованием системы сеток Bootstrap, которая построена поверх flexbox. Ключевые компоненты в BootstrapVue для разметки: ‹b-container›, ‹b-row› и ‹b-col›. См. Layout and Grid System для подробностей. Однако я обнаружил, что макет сетки CSS иногда намного лучше подходит для более сложных макетов. См. Сетка по примеру для получения дополнительной информации.

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

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

B-breadcrumb упрощает создание управляемых данными хлебных крошек. Вы можете легко обработать переменную $ route.path, чтобы преобразовать путь в массив хлебных крошек.

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

Вот несколько руководств для знакомства с BootstrapVue.

Больше макета

Боковые панели - обычное дело в многофункциональных приложениях. Вы можете разместить иерархические меню и, возможно, некоторую обобщенную информацию на боковых панелях. Vue-sidebar-menu - мое любимое решение для реализации иерархических меню. Вы можете организовать меню по разделам, иметь многоуровневую иерархию в отдельных пунктах меню, добавлять значки к пунктам меню, сворачивать и расширять боковую панель и даже иметь темные / светлые темы из коробки. Смотрите демо здесь.

Диалоги

Модальные диалоги - жизненно важный компонент потоков пользовательского интерфейса больших приложений. Вы используете их для простых предупреждений, подсказок и подтверждений. Часто подробная информация о каком-либо объекте отображается во всплывающем диалоговом окне. Хотя BootstrapVue включает компонент диалога, я считаю его довольно неуклюжим в использовании. Для простых предупреждений и подтверждений неплохо подходит vuejs-dialog. Для более сложных случаев использования я предлагаю vue-js-modal. Он поддерживает изменяемые размеры, адаптивные, перетаскиваемые диалоги с пользовательскими компонентами.

Утилиты

Хотя BootstrapVue включает в себя широкий спектр компонентов ввода формы, его возможности проверки ввода несколько ограничены и негибки. Для большей гибкости вы можете использовать vee-validate. Встроен ряд правил, которые устанавливают ограничения на допустимый ввод: буквенные, буквенно-тире, буквенно-цифровые, между диапазоном значений, только цифры, электронная почта, изображение, максимальное, минимальное, числовое, соответствие регулярному выражению, обязательные, исключенные значения, допустимые значения и т. д. Правила можно указать в шаблоне и легко связать в цепочку. Пользовательские правила можно легко определить и интегрировать с библиотекой. См. Документы здесь.

Перетаскивание - распространенная функция в веб-приложениях. SortableJS - популярная библиотека JavaScript для переупорядочиваемых списков перетаскивания. Он поддерживает ряд фреймворков, включая Vue. Его плагин Vue известен как Vue.Draggable. Вы можете увидеть несколько примеров, построенных на Vue.Draggable здесь. Вы можете настроить стиль с помощью CSS. Если вы посмелее, вы можете изучить таблицу стилей SASS компонента в vue-sidebar-menu.scss и полностью изменить / переопределить ее.

Одиночный выбор и множественный выбор являются общими механизмами ввода. Элемент Barebones HTML ‹select› довольно ограничен. Расширенные пользовательские интерфейсы пытаются упростить выбор, предоставляя ряд дополнительных возможностей, например, одиночный / множественный выбор, тегирование, фильтрация, поиск, асинхронный выбор, поддержка AJAX и поддержка Vuex. Вот два очень хороших компонента. Vue-select и vue-multiselect.

Иногда вы хотите разрешить пользователям копировать текст из определенного компонента в свой системный буфер обмена. Clipboard.js упрощает работу с JavaScript. Vue-clipboard2 - это простая привязка для использования в приложениях Vue.

Загрузка файла затруднена. Особенно сложно, когда вам нужны расширенные функции, такие как загрузка нескольких файлов, загрузка каталога, загрузка с перетаскиванием, возможность загрузки нескольких файлов одновременно, предварительный просмотр изображения перед загрузкой, работа с конечными точками POST и PUT, загрузка через запросы AJAX, расширенные проверки типа входного файла, возможно, анализ заголовка загружаемого файла, чтобы проверить несколько фактов перед его загрузкой. Vue-upload-component - универсальное решение для всех этих проблем. Некоторые отличные примеры доступны здесь. Хотя его обратные вызовы put-action и post-action отлично подходят для интеграции с конечными точками PUT и POST, мне особенно нравится вариант обратного вызова custom-action, поскольку он позволяет мне выполнять дополнительную предварительную и постобработку вокруг фактической загрузки файла. процесс.

Если вам нужны возможности редактирования форматированного текста, хорошее решение - Quill. Это полностью настраиваемый редактор с обширной поддержкой форматирования и модульными функциями, такими как буфер обмена, история и поддержка клавиатуры. Дополнительные модули можно легко зарегистрировать. Vue2-editor - это компонент-оболочка, который органично добавляет возможности Quill в приложения Vue 2.

Межкомпонентная связь

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

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

Кстати, vuex-persist - полезный плагин для кеширования вашего состояния Vuex в локальном хранилище браузера. Таким образом, всякий раз, когда ваше приложение перезагружается, оно может повторно использовать ранее сохраненное состояние. Например, если у вас есть таблица с разбивкой на страницы, вы можете сохранить номер текущей страницы в Vuex. Каждый раз, когда приложение перезагружается, оно может привести пользователя к тому же номеру страницы.

Примечания к прощанию

На данный момент в Vogue есть две версии Vue. Vue 2 - это текущая стабильная версия, а Vue 3 - это предстоящая новая версия. Убедитесь, что используемая вами библиотека совместима с версией Vue, с которой вы работаете. Я работаю только с Vue 2.

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

Сообщите мне в комментариях некоторые из ваших любимых компонентов. Я постараюсь включать их в обновления.

использованная литература

Больше контента на plainenglish.io