Более 10 крутых примеров компонентов, шаблонов и демонстраций Vue.js

Vue.js внешний фреймворк
Более 10 крутых примеров компонентов, шаблонов и демонстраций Vue.js

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

Кроме того, за последние несколько лет Vue.js стал очень популярным, и многие компании добавили его в свой технический стек. Преимущество этого фреймворка в том, что он имеет встроенную привязку данных и модель MVC (модель, представление, контроллер), сAngular.jsиReact.jsПо сравнению с , это упрощает настройку. Кроме того, у Vue.js небольшая кривая обучения, Vue легче изучить, понять и использовать, чем Angular.js.

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


BootstrapVue Argon Dashboard PRO

BootstrapVue Argon Dashboard PRO— это расширенная панель инструментов для BootstrapVue и Vue.js. Это совершенно новый продукт, основанный на новейшей структуре рамы, которую мы перестроили с нуля, чтобы сделать продукт более интуитивно понятным, более адаптируемым и простым в настройке. Позвольте Argon удивить вас своими интересными функциями и вывести ваши проекты на совершенно новый уровень.

https://demos.creative-tim.com/bootstrap-vue-argon-dashboard-pro

Vue White Dashboard

Vue White Dashboard — это бесплатная панель администратора Bootstrap 4 и Vue.js с открытым исходным кодом с множеством компонентов, которые сочетаются друг с другом и выглядят очень красиво. Vue White Dashboard имеет более 16 отдельных компонентов, которые дают вам свободу выбора и комбинирования. Все компоненты могут быть окрашены по-разному, и вы можете легко изменить их с помощью файлов Sass.

https://demos.creative-tim.com/vue-white-dashboard

Vue QRcode Reader

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

https://gruhn.github.io/vue-qrcode-reader

VueJS Expo

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

https://vuejsexpo.com

Vue Paper Dashboard PRO

Vue Paper Dashboard PRO— отличный ресурс, созданный на основе Bootstrap и Vue, который поможет вам быстро приступить к разработке информационных панелей. Vue Paper Dashboard Pro — этоOriginal Paper Dashboard ProПортированная версия VueJS. Использование панели инструментов очень простое, но требует базовых знаний Javascript, Vue и Vue-Router.

https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview

Koel

Koel— это простой веб-сервис персональной потоковой передачи аудио, написанный на Vue на стороне клиента и на Laravel на стороне сервера. Ориентированный на веб-разработчиков, Koel использует некоторые из более современных веб-технологий — сетку CSS, аудио, API-интерфейсы перетаскивания и т. д., чтобы выполнять свою работу.

https://koel.dev/

Vue Argon Dashboard

Vue Argon Dashboardэто панель инструментов для Bootstrap 4 и Vue.js. Он бесплатный, с открытым исходным кодом и содержит множество компонентов, которые помогут вам создать отличный веб-сайт. Vue Argon Dashboard имеет более 100 встроенных компонентов, поэтому вы можете выбирать и комбинировать их, а поскольку все элементы реализованы, это сэкономит много времени от прототипирования до полнофункционального кода. Панель инструментов поставляется с предварительно созданными примерами, поэтому процесс разработки не вызывает затруднений, а переход с нашей страницы на настоящий веб-сайт очень прост.

https://demos.creative-tim.com/vue-argon-dashboard

Pagekit

Pagekit— это модульная легкая CMS, созданная с использованием компонентов Symfony и VueJS. Будь то личный блог или веб-сайт вашей компании, используйте Pagekit для создания мощного контента для Интернета, который безупречно работает на любом устройстве. У него чистый и интуитивно понятный интерфейс, а также отличный встроенный рынок.

https://pagekit.com/

Vue Material Dashboard PRO

Vue Material Dashboard PRO— отличный шаблон администратора премиум-класса, созданный на основе Vue Material и VueJS. Он создан путем размышлений о том, что вам действительно нужно на панели инструментов. Vue Material Dashboard PRO содержит проверенные и оптимизированные плагины VueJS, все они предназначены для совместной работы. Использование панели инструментов очень простое, но требует базовых знаний Javascript, VueJS и Vue Router.

https://demos.creative-tim.com/vue-material-dashboard-pro

Vue-Color

Vue-Color— классная палитра цветов от Sketch, Photoshop, Chrome, Github, Twitter, Material Design и других.

http://vue-color.surge.sh

Vue Material Kit

Vue Material Kit— удивительный бесплатный ресурс с открытым исходным кодом, построенный на Vue Material и VueJS. Это поможет вам сразу приступить к разработке UI-китов. Vue Material Kit является оригинальнымMaterial KitОфициальная версия VueJS . Использование UI Kit очень просто, но требует базовых знаний Javascript, VueJS и Vue Router.

https://demos.creative-tim.com/vue-material-kit

Retrospectify

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

http://pepf.nl/retrospective

Code Notes

Code Notes— это простой менеджер сниппетов для разработчиков, созданный с помощью Electron и Vue.js. Используя его, вы можете сохранять несколько фрагментов в одной заметке, выполнять поиск по имени/языку/тегу и управлять сутью Github.

https://lauthieb.github.io/code-notes

Надеюсь, этот список будет полезен для вашего следующего проекта разработки 🙂


источник:Dev.to/creative Тим…, Автор: Creative Tim, Перевод: Официальный аккаунт "Front-End Full-Stack Developer"

Эта статья была впервые опубликована в публичном аккаунте"Fullstack-разработчик фронтенда"ID: by-zhangbing-dev, прочитайте последние статьи в первый раз и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!