Автор: Настасья Овчинникова
Перевод: сумасшедший технический ботаник
оригинал:flat logic.com/blog/new - Нажмите…
Копирование без разрешения строго запрещено
Платформа Vue.js была создана опытными разработчиками, имеет солидную поддержку сообщества, многофункциональна и легка.
Еще одна замечательная особенность Vue.js заключается в том, что ее легко понять и освоить. Любое веб-приложение можно создать с помощью фреймворка Vue. Поэтому я предлагаю вам узнать о некоторых проектах с открытым исходным кодом Vue.
Некоторые из этих проектов попали в этот список из-за их популярности в 2019 году. У некоторых из этих проектов не так много звезд на GitHub, но, на мой взгляд, эти проекты все же заслуживают внимания.
uiGradients
Коллекция градиентных эффектов
Website: uigradients.com/
GitHub:GitHub.com/GHO is/UI GR ах…
GitHub Stars: 4.6k
Богатая цветовая палитра и отличный UX делают этот проект одним из моих любимых. Эффекты градиента по-прежнему являются растущей тенденцией в веб-дизайне. Вы можете выбрать нужный цвет и увидеть все возможные градиенты. Коллекция огромна, потому что она внесена сообществом. Вы можете легко выбрать эффект градиента и скопировать его код CSS.
Различные шаблоны:flatlogic.com/templates
CSSFX
Коллекция CSS-эффектов.
Website: cssfx.dev
GitHub: GitHub.com/Джо вытащил лист/На данный момент…
GitHub Stars: 5.3k
Еще один проект для простого добавления небольших, но важных деталей в веб-приложение. Этот проект позволяет вам предварительно просмотреть каждый эффект CSS и просто щелкнуть выбранный эффект, чтобы просмотреть код.
Панель управления Sing App Vue
Административные шаблоны
Website: flat logic.com/templates/ это…
GitHub: GitHub.com/flat logic/ это…
GitHub Stars: 244
Демо:flat logic.com/templates/ это…
Документация:demo.flat logic.com/sing-app/do…
Это бесплатный шаблон администратора с открытым исходным кодом, созданный с использованием последних версий Vue и Bootstrap. В наши дни наиболее распространенной практикой является использование шаблона панели администратора вместо того, чтобы создавать все с нуля. При оценке админ-шаблонов основными критериями, которые приходят мне на ум, являются: возможность кастомизации и полнота документации. Sing App Vue даст вам ценные советы, которые помогут вам быстро приступить к работе со всеми необходимыми диаграммами, формами, таблицами, картами и т. д.
Vue Storefront
A PWA storefront
Интернет-магазин PWA
Website: www.vuestorefront.io
GitHub: GitHub.com/div Ant Ltd/…
GitHub Stars: 5.8k
Это приложение PWA, которое может подключаться к любому бэкенду (или почти к любому бэкэнду). Главным преимуществом этого проекта является использование безголовой архитектуры. Это комплексное решение, которое дает вам множество возможностей (благодаря отличной поддержке со стороны растущего сообщества, которое улучшит ваш SEO на стороне сервера, подход, ориентированный на мобильные устройства, и автономный режим.
Faviator
Библиотека для создания иконок
Website: www.faviator.xyz
Demo: www.faviator.xyz/playground
GitHub: GitHub.com/F авиатор/…
GitHub Stars: 94
Если вам нужен мастер для создания значка. Можно использовать любой шрифт Google и любой цвет. Просто просмотрите предпочитаемую конфигурацию и выберите формат PNG, SVG или JPG.
iView
Инструментарий компонентов пользовательского интерфейса Vue
Website: iviewui.com/
GitHub: github.com/iview/iview
GitHub Stars: 22.8k
Постоянные обновления делают этот набор компонентов пользовательского интерфейса хорошим выбором для разработчиков с разным уровнем навыков. Но вы должны знать, что он не поддерживает IE8.
Чтобы начать работу с iView, убедитесь, что у вас есть четкое представление об однофайловых компонентах. У проекта удобный API и обширная документация.
Postwoman
- Конструктор запросов API*
Website: postwoman.io/
GitHub: GitHub.com/Ли ЯшэнТомас…
GitHub Stars: 10.5k
Это альтернатива Postman. Он бесплатный, разработан многими людьми и поддерживает несколько платформ и устройств. Этот инструмент очень быстрый и имеет множество обновлений. Создатели инструмента утверждают, что в ближайшем будущем функций станет больше. Вы можете помочь проекту, добавив автозаполнение, дополнительные методы и поддержку HTTP. Пожалуйста, присоединяйтесь к сообществу!
Vue Virtual Scroller
полоса быстрой прокрутки
Website: АК пусть yum.GitHub.IO/v UE-виртуальный…
GitHub: GitHub.com/AK make yum/v UE-…
GitHub Stars: 3.4k
Vue Virtual Scroller состоит из четырех основных компонентов. RecycleScroller может отображать видимые элементы в списке. Если вы не знаете размер элемента, лучше использовать DynamicScroller. DynamicScrollerItem упаковывает все в DynamicScroller (для обработки изменений размера). IdState упрощает управление локальным состоянием (внутри RecycleScroller).
Mint UI
элементы мобильного интерфейса
Website: mint-ui.github.io/#!/en
GitHub: GitHub.com/E?Fe/Люди…
GitHub Stars: 15.2k
Создавайте мобильные приложения быстрее, используя готовые компоненты CSS и JS. С помощью этого инструмента вам не нужно беспокоиться о риске создания больших файлов, поскольку вы можете загружать их по требованию. Анимация обрабатывается CSS3. Чтобы использовать Mint UI, вам необходимо установить npm. Вы должны попытаться предсказать все компоненты, которые нужны вашему приложению, и импортировать только необходимые компоненты. Полный код (включая файлы CSS) весит всего 30 КБ.
V Calendar
Плагин без зависимостей для создания календарей
Website: vcalendar.io
GitHub: GitHub.com/Натан Рейес…
GitHub Stars: 1.6k
Вы можете выбрать различные визуальные индикаторы для украшения календаря. V Calendar также предоставляет вам три режима выбора даты:
- одно свидание;
- несколько дат;
- Режим выбора диапазона дат.
Этот плагин календаря удобен для мобильных устройств, имеет разные цветовые темы и может адаптироваться к разным размерам экрана.
Система дизайна Vue.
Набор инструментов пользовательского интерфейса
Website: vueds.com/
GitHub: GitHub.com/vi мусор МИС/vu…
GitHub Stars: 1.7k
Это хорошо организованный инструмент с понятным названием для любой команды веб-разработчиков. Благодаря возможности экспорта в виде зависимости NPM вы можете создавать собственные дизайны в любом проекте Vue. Самым большим преимуществом является возможность использовать средство форматирования кода Prettier, которое автоматически форматирует ваш код перед фиксацией в Git.
Proppy
Библиотеки для создания реквизита
Website: proppyjs.com
GitHub: GitHub.com/farhadi19/pro…
GitHub Stars: 855
props позволяют нам передавать данные в разные компоненты. props не могут быть изменены или переданы вверх по дереву компонентов. Таким образом, Proppy помогает вам получать различные ресурсы, составлять их как свойства и передавать их любому компоненту.
Light Blue Vue Admin
Шаблон Vue.js для панели администратора
Website: плоская логика.com/templates/com…
GitHub: GitHub.com/flat logic/com…
GitHub Stars: 76
Демо:demo.flat logic.com/light-blue-…
Документация:demo.flat logic.com/light-blue/…
Этот шаблон создан с помощью Vue CLI и Bootstrap 4. Как видно из демо, в шаблоне очень простой набор страниц: типографика, карты, диаграммы, чат и т. д. Если вам нужно расширить шаблон, вы можете взглянуть на более чем 60 компонентов.Light Blue Vue Full, который не содержит jQuery и имеет две цветовые темы.
Vue API Query
Создайте запрос к REST API
GitHub: GitHub.com/Робсон тенор…
GitHub Stars: 1.1k
Об этом проекте много не скажешь. Он делает именно то, о чем говорится в рекламируемом описании: помогает создавать запросы REST API.
Vue Grid Layout
Макет сетки для Vue.js
Website: Просто потяните Y Solutions.GitHub.IO/v UE-grid-…
GitHub: GitHub.com/Fake это значит, о, роса, тело, о...
GitHub Stars: 3.1k
Простое решение всех проблем, связанных с сеткой. Он имеет статические, изменяемые размеры и перетаскиваемые виджеты. Он отзывчив и может восстанавливать и сериализовать макеты. Если вам нужно добавить еще один виджет, вам не нужно перестраивать все сетки.
Vue Content Loader
Create a placeholder loading
Создать замещающую нагрузку
Website: Я нахожусь на .com/create-v UE-…
GitHub: GitHub.com/egoist/vUE-…
GitHub Stars: 2k
Чтобы узнать все о проекте, вы можете просто использовать егоонлайн-инструменты. Просто установите предпочтительные свойства, такие как ширина и высота, скорость и цветовая схема, и наслаждайтесь настраиваемым загрузчиком контента. Можно быстро установить с помощью yarn и простого формата SVG (JS не требуется).
Диаграмма Vue2.0
визуализация данных
Website: Simon ZhangITER.GitHub.IO/data visual i…
GitHub: GitHub.com/Саймон Чжан и…
GitHub Stars: 1.3k
На картинке вы можете увидеть очень красивые графики. Этот проект делает любые данные более читабельными, облегчая нам понимание и интерпретацию. Это позволяет нам легко обнаруживать тенденции и закономерности в любом наборе данных.
Vue.js Modal
Модальные окна с широкими возможностями настройки
Website: vue-js-modal.yev.io/
GitHub: Github.com/eu V-образным вырезом / в UE- ...
GitHub Stars: 2.9k
ты сможешьВеб-сайтчтобы увидеть все различные типы модальных окон. Всего кнопок 15, нажмите любую и вы увидите пример модального окна.
Vuesax
компоненты рамы
Website: lusaxweb.github.io/vuesax/
GitHub: GitHub.com/lusa в Интернете/vu…
GitHub Stars: 3.7k
Этот проект очень популярен в сообществе. Это позволяет создавать разные продукты для каждого компонента. Создатели Vuesax подчеркивают, что каждый веб-разработчик должен иметь свободу выбора, когда дело касается веб-дизайна. Сначала вам понадобится библиотека CDN и ссылка на ее файл CSS.
Vue2 Animate
Порт Animate.css
Website: Он и -all stars.com/v UE2-Animato…
GitHub: GitHub.com/aska32764/…
GitHub Stars: 1.1k
Эта библиотека является кроссбраузерной. Вы можете выбрать один из 5 типов анимации: вращение, скольжение, затухание, отскок и масштабирование. В своемВеб-сайтНа нем есть демо. Длительность анимации по умолчанию составляет 1 секунду, но вы можете настроить этот параметр.
Vuetensils
Набор инструментов для Vue.js
Website: vuetensils.stegosource.com
GitHub: GitHub.com/st Ego Source ...
GitHub Stars: 111
Это стандартная библиотека интерфейса, но самое замечательное в ней то, что она не имеет дополнительных стилей. Вы можете разработать индивидуальный дизайн и применить все требования к брендингу. Просто напишите нужные стили, добавьте их в свой проект и включите столько компонентов, сколько хотите.