Известные проекты с открытым исходным кодом Vue.js

внешний интерфейс Vue.js

Автор: Настасья Овчинникова

Перевод: сумасшедший технический ботаник

оригинал: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

Image source: http://uigradients.com/

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

Различные шаблоны:flatlogic.com/templates

CSSFX

Коллекция CSS-эффектов.

Website: cssfx.dev

GitHub: GitHub.com/Джо вытащил лист/На данный момент…

GitHub Stars: 5.3k

Image source: https://cssfx.dev

Еще один проект для простого добавления небольших, но важных деталей в веб-приложение. Этот проект позволяет вам предварительно просмотреть каждый эффект CSS и просто щелкнуть выбранный эффект, чтобы просмотреть код.

Панель управления Sing App Vue

Административные шаблоны

Website: flat logic.com/templates/ это…

GitHub: GitHub.com/flat logic/ это…

GitHub Stars: 244

Vue.js Open Source

Демо:flat logic.com/templates/ это…

Документация:demo.flat logic.com/sing-app/do…

Это бесплатный шаблон администратора с открытым исходным кодом, созданный с использованием последних версий Vue и Bootstrap. В наши дни наиболее распространенной практикой является использование шаблона панели администратора вместо того, чтобы создавать все с нуля. При оценке админ-шаблонов основными критериями, которые приходят мне на ум, являются: возможность кастомизации и полнота документации. Sing App Vue даст вам ценные советы, которые помогут вам быстро приступить к работе со всеми необходимыми диаграммами, формами, таблицами, картами и т. д.

img

Vue Storefront

A PWA storefront

Интернет-магазин PWA

Website: www.vuestorefront.io

GitHub: GitHub.com/div Ant Ltd/…

GitHub Stars: 5.8k

Image source: https://www.vuestorefront.io

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

Faviator

Библиотека для создания иконок

Website: www.faviator.xyz

Demo: www.faviator.xyz/playground

GitHub: GitHub.com/F авиатор/…

GitHub Stars: 94

Image source: https://www.faviator.xyz

Если вам нужен мастер для создания значка. Можно использовать любой шрифт Google и любой цвет. Просто просмотрите предпочитаемую конфигурацию и выберите формат PNG, SVG или JPG.

iView

Инструментарий компонентов пользовательского интерфейса Vue

Website: iviewui.com/

GitHub: github.com/iview/iview

GitHub Stars: 22.8k

Image source: https://iviewui.com/

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

Чтобы начать работу с iView, убедитесь, что у вас есть четкое представление об однофайловых компонентах. У проекта удобный API и обширная документация.

Postwoman

  • Конструктор запросов API*

Website: postwoman.io/

GitHub: GitHub.com/Ли ЯшэнТомас…

GitHub Stars: 10.5k

Image source: https://github.com/liyasthomas/postwoman

Это альтернатива Postman. Он бесплатный, разработан многими людьми и поддерживает несколько платформ и устройств. Этот инструмент очень быстрый и имеет множество обновлений. Создатели инструмента утверждают, что в ближайшем будущем функций станет больше. Вы можете помочь проекту, добавив автозаполнение, дополнительные методы и поддержку HTTP. Пожалуйста, присоединяйтесь к сообществу!

Vue Virtual Scroller

полоса быстрой прокрутки

Website: АК пусть yum.GitHub.IO/v UE-виртуальный…

GitHub: GitHub.com/AK make yum/v UE-…

GitHub Stars: 3.4k

Image source: https://akryum.github.io/vue-virtual-scroller/#/horizontal

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

Image source: http://mint-ui.github.io/#!/en

Создавайте мобильные приложения быстрее, используя готовые компоненты CSS и JS. С помощью этого инструмента вам не нужно беспокоиться о риске создания больших файлов, поскольку вы можете загружать их по требованию. Анимация обрабатывается CSS3. Чтобы использовать Mint UI, вам необходимо установить npm. Вы должны попытаться предсказать все компоненты, которые нужны вашему приложению, и импортировать только необходимые компоненты. Полный код (включая файлы CSS) весит всего 30 КБ.

V Calendar

Плагин без зависимостей для создания календарей

Website: vcalendar.io

GitHub: GitHub.com/Натан Рейес…

GitHub Stars: 1.6k

Image source: https://vcalendar.io

Вы можете выбрать различные визуальные индикаторы для украшения календаря. V Calendar также предоставляет вам три режима выбора даты:

  • одно свидание;
  • несколько дат;
  • Режим выбора диапазона дат.

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

Система дизайна Vue.

Набор инструментов пользовательского интерфейса

Website: vueds.com/

GitHub: GitHub.com/vi мусор МИС/vu…

GitHub Stars: 1.7k

Image source: https://vueds.com/example/#/Elements/Button

Это хорошо организованный инструмент с понятным названием для любой команды веб-разработчиков. Благодаря возможности экспорта в виде зависимости NPM вы можете создавать собственные дизайны в любом проекте Vue. Самым большим преимуществом является возможность использовать средство форматирования кода Prettier, которое автоматически форматирует ваш код перед фиксацией в Git.

Proppy

Библиотеки для создания реквизита

Website: proppyjs.com

GitHub: GitHub.com/farhadi19/pro…

GitHub Stars: 855

Image source: https://proppyjs.com

props позволяют нам передавать данные в разные компоненты. props не могут быть изменены или переданы вверх по дереву компонентов. Таким образом, Proppy помогает вам получать различные ресурсы, составлять их как свойства и передавать их любому компоненту.

Light Blue Vue Admin

Шаблон Vue.js для панели администратора

Website: плоская логика.com/templates/com…

GitHub: GitHub.com/flat logic/com…

GitHub Stars: 76

Image source: https://flatlogic.com/templates/light-blue-vue-lite/demo

Демо: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

Image source: https://github.com/robsontenorio/vue-api-query

Об этом проекте много не скажешь. Он делает именно то, о чем говорится в рекламируемом описании: помогает создавать запросы REST API.

Vue Grid Layout

Макет сетки для Vue.js

Website: Просто потяните Y Solutions.GitHub.IO/v UE-grid-…

GitHub: GitHub.com/Fake это значит, о, роса, тело, о...

GitHub Stars: 3.1k

Image source: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

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

Vue Content Loader

Create a placeholder loading

Создать замещающую нагрузку

Website: Я нахожусь на .com/create-v UE-…

GitHub: GitHub.com/egoist/vUE-…

GitHub Stars: 2k

Image source: http://danilowoz.com/create-vue-content-loader/

Чтобы узнать все о проекте, вы можете просто использовать егоонлайн-инструменты. Просто установите предпочтительные свойства, такие как ширина и высота, скорость и цветовая схема, и наслаждайтесь настраиваемым загрузчиком контента. Можно быстро установить с помощью yarn и простого формата SVG (JS не требуется).

Диаграмма Vue2.0

визуализация данных

Website: Simon ZhangITER.GitHub.IO/data visual i…

GitHub: GitHub.com/Саймон Чжан и…

GitHub Stars: 1.3k

Image source: https://simonzhangiter.github.io/DataVisualization/#/dashboard

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

Vue.js Modal

Модальные окна с широкими возможностями настройки

Website: vue-js-modal.yev.io/

GitHub: Github.com/eu V-образным вырезом / в UE- ...

GitHub Stars: 2.9k

Image source: http://vue-js-modal.yev.io

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

Vuesax

компоненты рамы

Website: lusaxweb.github.io/vuesax/

GitHub: GitHub.com/lusa в Интернете/vu…

GitHub Stars: 3.7k

Image source: https://lusaxweb.github.io/vuesax/

Этот проект очень популярен в сообществе. Это позволяет создавать разные продукты для каждого компонента. Создатели Vuesax подчеркивают, что каждый веб-разработчик должен иметь свободу выбора, когда дело касается веб-дизайна. Сначала вам понадобится библиотека CDN и ссылка на ее файл CSS.

Vue2 Animate

Порт Animate.css

Website: Он и -all stars.com/v UE2-Animato…

GitHub: GitHub.com/aska32764/…

GitHub Stars: 1.1k

Image source: https://the-allstars.com/vue2-animate/

Эта библиотека является кроссбраузерной. Вы можете выбрать один из 5 типов анимации: вращение, скольжение, затухание, отскок и масштабирование. В своемВеб-сайтНа нем есть демо. Длительность анимации по умолчанию составляет 1 секунду, но вы можете настроить этот параметр.

Vuetensils

Набор инструментов для Vue.js

Website: vuetensils.stegosource.com

GitHub: GitHub.com/st Ego Source ...

GitHub Stars: 111

img
Image source: vuetensils.stegosource.com

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

Добро пожаловать в общедоступную учетную запись внешнего интерфейса: Front-end Pioneer, получите полную серию руководств от начального до расширенного веб-пакета бесплатно.