Автор: Джон Лим Переводчик: Front-end Xiaozhi Источник: vuemastery
Если у вас есть мечты, у вас есть галантерея, вы можете поискать в WeChat [Великое переселение в мир] Следуйте за этой Шуванжи, которая все еще моет посуду ранним утром. Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.
Vue дополнен здоровой экосистемой плагинов и пакетов, что делает разработку надежной, быстрой и легкой. Поскольку Vue является предпочтительной средой для международного сообщества разработчиков, существует растущая библиотека плагинов и пакетов, которые вы можете использовать в своих проектах. В этой статье перечислены 15 популярных плагинов Vue для Vue 2 и Vue 3.
- Vuetify
- NuxtJS
- Vuex
- Vuex Persisted State
- VuePress
- Vue Meta
- Vue ChartJS
- Vue Grid Layout
- Vue Draggable
- Vee-Validate
- Vue Toastification
- Vue Tour
- Swiper.js
- Vue2-Leaflet
- TroisJS
- Vue Scrollama
- Vue QR Code Reader
Vuetify
Руководство:Woohoo.v UE mastery.com/courses/Bea…
Вы когда-нибудь пытались сделать свое приложение визуально привлекательным?Vuetify — это библиотека пользовательского интерфейса, основанная на Material Design, которая поддерживает языки дизайна Google и Android.
Это библиотека с открытым исходным кодом с сотнями компонентов, включая кнопки, панели приложений, чипы, модальные окна и многое другое. Эти компоненты предварительно разработаны и очень функциональны, что позволяет вам взаимодействовать с ними через задокументированные реквизиты и слоты. Предопределенные классы CSS также доступны для управления цветами, шрифтами, интервалами сетки, флексбоксами и многим другим.
NuxtJS
Nuxt основан на сильной модульной архитектуре. Вы можете выбрать один из более чем 50 модулей, чтобы сделать вашу разработку быстрее и проще. Поддержка PWA, добавление Google Analytics на ваши страницы или создание карт сайта — и все это без необходимости заново изобретать велосипед.
NuxtJS в настоящее время основан на Vue 2. Но nux3 был выпущен недавно и полностью переписан для поддержки Vue 3.
Vuex
Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила, чтобы гарантировать предсказуемое изменение состояния. Vuex также интегрирован в расширение devtools официального инструмента отладки Vue (открывается в новом окне), предоставляя расширенные функции отладки, такие как отладка во времени с нулевой конфигурацией, импорт и экспорт моментальных снимков состояния и т. д.
Vuex Persisted State
Механизм состояния Vuex сбрасывается, как только он обновляется.Путь решения проблемы обычно состоит в том, чтобы сохранить его (сессионное/локальное хранилище).vuex-persistedstateПлагины помогают нам интегрировать эти функции.
VuePress
VuePress — это генератор статических веб-сайтов на основе Vue, разработанный Эваном Ю, автором Vue, для удобства документации.
- Тема по умолчанию соответствует официальной документации Vue.
- Простота, минимум настроек, высокая производительность
- Markdown предоставляет расширения для технической документации
- Поставляется с ПВА
- Пользовательские темы, степень настройки полностью зависит от вас
Vue Meta
адрес:vue-meta.nuxtjs.org/
Плагин vue-meta на основе Vue 2.0 в основном используется для управления тегами заголовков HMTL, а также поддерживает SSR.
vue-meta имеет следующие особенности:
- Установите метаинформацию в компоненте, вы можете легко управлять тегами заголовков
- Данные метаинформации реагируют, если данные изменяются, информация в заголовке будет автоматически обновляться.
поддержка ССР
Vue ChartJS
адрес:Уууу, эта лошадь plus.com/package/v ue…
Хотите добавить диаграммы в свое приложение Vue? может видетьChart.js. Это простая и гибкая библиотека диаграмм JS для дизайнеров и разработчиков. Он имеет множество красивых типов диаграмм на выбор.
адрес:Просто потяните Y Solutions.GitHub.IO/v UE-grid-…
Vue Grid Layout — это система компоновки сетки, похожая на Gridster для Vue.js, вдохновленная React Grid Layout.
характеристика
- перетаскиваемый
- изменяемый размер
- Статические виджеты (не перетаскиваемые, изменяемые размеры)
- Проверка границ при перетаскивании и изменении размера
- Не перестраивайте сетку при добавлении или удалении деталей.
- Сериализуемые и восстанавливаемые макеты
- Автоматизированная поддержка RTL
- Отзывчивый
Vue Draggable
адрес:Уууу, эта лошадь plus.com/package/v ue…
Vue.Draggable — этоSortable.jsРеализован плагин vue drag and drop. Он поддерживает мобильные устройства, перетаскивание и выделение текста, интеллектуальную прокрутку, перетаскивание между различными списками, не зависит от jQuery, совместим с анимацией перехода vue2 и поддерживает операции отмены.Короче говоря, это очень хороший компонент перетаскивания vue.
Vee-Validate
адрес:Уууу, эта лошадь плюс .com/package/VE о…
Чтобы убедиться, что через форму от пользователя собирается правильный тип данных, необходимо проверить форму, чтобы убедиться, что пользовательский ввод соответствует ожидаемой схеме. VeeValidate — это пакет, который может добавить этот уровень функциональности к любому компоненту формы.
Vue Toastification
адрес:vue-toastification.maronato.dev/
Vue Toastification — это легкий, простой в использовании и красивый компонент всплывающей подсказки, который предоставляет большое количество опций для поддержки большинства пользовательских опций.
Vue Tour
адрес:GitHub.com/пульсар В/В…
Vue Tour — это легкий, простой и настраиваемый плагин с практическими рекомендациями для использования с Vue.js. Он обеспечивает быстрый и простой способ направлять пользователей по вашему приложению.
Swiper.js
адрес:swiperjs.com/vue
Swiper.js— это готовый карусельный компонент, который можно использовать для перемещения между различными изображениями. Swiper.js изначально поддерживает Vue 3, предоставляя компонент, который можно подключить к вашему проекту. Для Vue 2 вы можете использовать другие пакеты, такие какvue-awesome-swiper.
vue2-leaflet
адрес:Уууу, эта лошадь plus.com/package/v ue…
vue2-leafletЭто инкапсуляция ledflet, а vue2-leaflet можно использовать непосредственно в проекте vue.Leaflet.js— это библиотека с открытым исходным кодом, с помощью которой можно развертывать интерактивные, простые, легкие и простые веб-карты.
TroisJS
адрес:troisjs.github.io/
Trois (по-французски Three) — это библиотека Vue 3 дляThree.JS, которая является популярной библиотекой WebGL.
Three.JS имеет хорошую поддержку как для настольных компьютеров, так и для мобильных устройств. Эта библиотека позволяет легко создавать 3D-контент для вашего веб-сайта с помощью компонентов VueJS. Вы можете использовать эту библиотеку, чтобы добавить средство 3D-рендеринга на свой веб-сайт и добавить средство 3D-рендеринга в свой файл VueJs.<template>Разделы используют предварительно созданные компоненты для указания деталей сцены, таких как материалы, освещение, сетки, тени и многое другое.
Trois.Jsявляется оболочкой над Three.js, поэтому не медленнее, чем исходная библиотека. Он также упрощает работу с объектами, автоматически удаляя геометрию, материалы, текстуры, средства визуализации и т. д., чего нет в исходной библиотеке.
vue-scrollama
адрес:Уууу, эта лошадь plus.com/package/v ue…
Компонент Vue для простой настройки взаимодействий с прокруткой (также известных как прокрутка презентаций). Используйте Scrollama под капотом.
Vue QR Code Reader
адрес:Как. GitHub.IO/v UE-QR-код-…
QR-коды (QR-коды) очень распространены в современном мире. Vue QR Code Reader — это пакет plug-and-play, который позволяет добавить в ваше приложение функцию сканирования QR-кода.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
Woohoo.v ue mastery.com/blog/most-afraid…
Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.
Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.