10 лучших библиотек компонентов Vue

Vue — одна из ведущих библиотек JavaScript, используемых для веб-разработки. С момента своего запуска в 2014 году популярность Vue неуклонно росла, предоставляя потрясающие функции для привлечения разработчиков. Например, его компонентный подход к проектированию пользовательского интерфейса позволяет разработчикам быстро создавать сложные пользовательские интерфейсы.

В этой статье я расскажу о 10 библиотеках компонентов Vue, которые могут облегчить жизнь разработчикам.

1. BootstrapVue

BootstrapVue — это CSS-библиотека на основе Bootstrap, которая сочетает в себе концепции Bootstrap и Vue. Используя эту библиотеку, вы можете создавать адаптивные, ориентированные на мобильные устройства веб-проекты с поддержкой ARIA.

Bootstrap Vue имеет более 350 000 еженедельных загрузок NPM и 14 000 звезд GitHub.

Особенности Bootstrap Vue

Отзывчивые, модульные и настраиваемые компоненты.
Библиотека на основе Bootstrap.
Документация проста и понятна.
Более быстрое завершение клиентских приложений.
Сильная и активная поддержка сообщества.
Существует более 1000 иконок, множество директив, более 45 доступных плагинов и более 85 компонентов.

Монтаж

Вы можете легко установить Bootstrap Vue с помощью NPM или Yarn следующим образом.

// Using NPM
npm install bootstrap-vue
// Using Yarn
yarn add bootstrap-vue

Пример использования

В следующем коде показан пример кнопки Bootstrap Vue.

// app.js file
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
// app.vue file
<div>
  <b-button variant="outline-primary">Button</b-button>
</div>

2. Верифицируйте

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

Vuetify имеет более 433 000 еженедельных загрузок NPM и 35 000 звезд GitHub.

Особенности Vuetify

Это позволяет настраивать приложения с помощью динамических макетов.
Вы можете использовать библиотеки SASS для стилизации своих компонентов.
Он поддерживает Vue CLI-3, стандарты доступности и все современные браузеры.
Он предлагает множество взаимозаменяемых элементов пользовательского интерфейса, включая навигацию, карусели и карточки.
Базовые шаблоны также доступны в Vuetify для Apache Cordova, a la carte, Electron, PWA, NUXT, Webpack и простого HTML.

Монтаж

Вы можете легко установить Vuetify с помощью NPM или Yarn следующим образом.

// Using NPM
npm install vuetify
// Using Yarn
yarn add vuetify

Пример использования

В следующем коде показан пример кнопки Vuetify.

// app.js file
import Vue from 'vue'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

new Vue({
vuetify: new Vuetify(opts),
render: h => h(App)
}).$mount("#app");
// app.vue file

<template>
  <v-btn depressedcolor="primary">
      Primary
  </v-btn>
</template>

3. Буфи

Buefy — это легкая библиотека компонентов пользовательского интерфейса Vue, основанная на Bulma. Bulma — это прежде всего статический CSS, не дающий никаких практических преимуществ. Buefy исправляет это, предоставляя ценные элементы, которые используют CSS Bulma прямо из коробки. Buefy — отличная библиотека, которую можно использовать, если вы знакомы с Bulma, поскольку она предлагает надежную интеграцию.

У Buefy более 64 000 еженедельных загрузок NPM и 9 000 звезд GitHub.

Особенности Буфи

Сочетание функций Bulma и Vue позволяет создавать привлекательные приложения с минимальным кодом.
Несмотря на характерный внешний вид и ощущение по умолчанию, фреймворк невероятно адаптируется.
Индивидуальные настройки выполняются быстро и просто. Вы можете определить цвета своего бренда, рекомендации по размерам и многое другое.
Buefy использует Sass для настройки глобальных переменных.
Легкий и без внутренних зависимостей.

Монтаж

Вы можете легко установить Buefy с помощью NPM следующим образом.

// Using NPM
npm install buefy

Пример использования

В следующем коде показан пример кнопки Buefy.

// app.js file

import Vue from 'vue' 
import Buefy from 'buefy' 
import 'buefy/dist/buefy.css' 

Vue.use(Buefy)
// app.vue file

<template>
  <section>
    <b-button @click="click">Click</b-button></section> 
</template> 

<script>
  export default { 
   methods: { 
      click() { 
        this.$buefy.notification.open('Button Clicked!!') 
      } 
    } 
  } 
</script>

4. Квазар

Quasar — еще одна популярная платформа компонентов Vue, представленная для реализации высокопроизводительных пользовательских интерфейсов Vue.js. Он предлагает поддержку настольных и мобильных браузеров прямо из коробки. У него более 85 000 еженедельных загрузок NPM и 21 000 звезд GitHub.

Особенности квазара

Его можно использовать для настольных, веб- и мобильных браузеров.
Поддерживает SPA, SSR, PWA, мобильное приложение, настольное приложение и режимы сборки расширений браузера.
Способен к автоматическому устранению мертвого кода (дерево шейкабельное).
Он легко настраивается и расширяется.
Регулярно обновляется.
Это фреймворк, ориентированный на производительность.

Монтаж

Вы можете легко установить Quasar с помощью NPM или Yarn следующим образом.

// Using NPM
npm install quasar
// Using Yarn
yarn add quasar

Пример использования

В следующем коде показан пример кнопки Quasar.

// app.js file

import Vue from 'vue'
import { Quasar } from "quasar";

Vue.use(Quasar);
// app.vue file

<template>
  <q-btn color="purple" label="Purple" />
</template>

5. Элемент Плюс

Element Plus — это библиотека компонентов пользовательского интерфейса, основанная на Vue 3, которая была представлена как преемник популярной библиотеки Element UI. Он предлагает набор сложных компонентов пользовательского интерфейса, упрощающих работу разработчиков, включая временные шкалы, календари, средства выбора данных и деревья. Кроме того, вы можете перевести каждую строку в компонентах пользовательского интерфейса Element Plus, используя стандарт i18n.

Element Plus имеет более 97 000 еженедельных загрузок NPM и 17 000 звезд GitHub.

Особенности Элемент Плюс

Был написан на TypeScript.
Предусмотрены встроенные переходы.
Поддерживает переводы более чем на 30 языков.
Имеет темный режим.
Он легко настраивается с помощью переменных SCSS.

Монтаж

Вы можете легко установить Element Plus с помощью NPM или Yarn следующим образом.

// Using NPM
npm install element-ui
// Using Yarn
yarn add element-ui

Пример использования

В следующем коде показан пример кнопки Element Plus.

// app.js file

import Vue from 'vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

Vue.use(ElementPlus);
// app.vue file

<template>
  <el-button type="success">Success</el-button>
</template>

6. Пользовательский интерфейс Syncfusion Vue

Библиотека компонентов пользовательского интерфейса Syncfusion Vue содержит более 70 высокопроизводительных, легких, модульных и адаптивных компонентов пользовательского интерфейса в одном пакете. Он включает в себя ряд сложных компонентов пользовательского интерфейса, предназначенных для облегчения работы разработчиков, таких как Сетка данных, Планировщик, Календарь, Дерево, Карты, Сводная таблица и Электронная таблица. Помимо Vue, в нем есть библиотеки JavaScript, Angular, React и Blazor.

Особенности пакета пользовательского интерфейса Syncfusion Vue

Для облегчения выбора ссылок все компоненты выполнены в виде модулей.
Компоненты сенсорные и адаптируются к различным устройствам.
Глобальная аудитория на разных языках и культурах может использовать эти компоненты.
Обширные демонстрации и документация.
Регулярные обновления.
Легкий.

Монтаж

Вы можете легко установить Syncfusion Vue UI с помощью NPM следующим образом.

// Using NPM
npm install @syncfusion/ej2-vue-base

Пример использования

В следующем коде показан пример кнопки пользовательского интерфейса Syncfusion Vue.

// app.js file

import Vue from 'vue'
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";   
  
Vue.use(ButtonPlugin);
// app.vue file

<template> 
  <ejs-button :isPrimary="true">Primary</ejs-button>
</template>

7. Материал Vue

Vue Material — это простая и легкая библиотека компонентов Vue, созданная на основе спецификаций дизайна Material. Он предоставляет более 50 полностью адаптивных компонентов, позволяющих создавать хорошо продуманные приложения для любого решения.

Vue Material имеет более 15 000 еженедельных загрузок NPM и 9 000 звезд GitHub.

Особенности материала Vue

Поддержка всех современных веб-браузеров.
Динамические темы и компоненты по запросу.
Легкий и простой в использовании.
Отзывчивые компоненты для любого размера экрана.

Монтаж

Вы можете легко установить Vue Material с помощью NPM или Yarn следующим образом.

// Using NPM
npm install vue-material
// Using Yarn
yarn add vue-material

Пример использования

В следующем коде показан пример кнопки Vue Material.

// app.js

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)
// app.vue file

<template>
  <md-button class="md-primary">Primary</md-button>
</template>

8. Мятный интерфейс

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

Mint UI имеет более 3500 еженедельных загрузок NPM и 16 000 звезд GitHub.

Особенности пользовательского интерфейса Mint

Загрузка по запросу для импорта стилей только при необходимости.
Размер сжатого пакета составляет около 30 КБ.
Удобные для мобильных устройств компоненты, созданные с помощью CSS и JavaScript.
Анимации обрабатываются с помощью CSS3, чтобы избежать сложностей на мобильных устройствах.

Монтаж

Вы можете легко установить Mint UI с помощью NPM следующим образом.

// Using NPM
npm install mint-ui

Пример использования

В следующем коде показан пример кнопки пользовательского интерфейса Mint.

// app.js

import Vue from 'vue'
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";

Vue.use(MintUI)
// app.vue file

<mt-button type="primary">primary</mt-button>

9. iView

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

iView имеет более 12 000 еженедельных загрузок NPM и 24 000 звезд GitHub.

Возможности iView

Мощный интерфейс командной строки.
Обширные демонстрации и документация.
Удобный API с регулярными обновлениями.

Монтаж

Вы можете легко установить iView с помощью NPM или Yarn следующим образом.

// Using NPM
npm install iview
//Using Yarn
yarn add iview

Пример использования

В следующем коде показан пример кнопки iView.

// app.js

import Vue from 'vue'
import iView from "iview";
import "iview/dist/styles/iview.css";

Vue.use(iView)
// app.vue file

<template>
  <Button>Default</Button>
  <Button type="primary">Primary</Button>
</template>

10. Вукс

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

Vux имеет более 1900 еженедельных загрузок NPM и 17 600 звезд GitHub.

Функции

Поддержка глобализации.
У вас есть полная свобода использовать любую другую библиотеку или компонент вместе с компонентами Vux.
Пользовательские темы могут быть настроены.

Монтаж

Вы можете легко установить Vux с помощью NPM следующим образом.

// Using NPM
npm install vux

Пример использования

В следующем коде показан пример кнопки Vux.

// app.js

import Vue from 'vue'
import { XButton } from 'vux'
Vue.component('x-button', XButton)
// app.vue file
<template>
<x-button class="weui-btn weui-btn_default"> Button </x-button>
</template>

Заключение

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

Я надеюсь, что мои описания помогут вам выбрать лучшую библиотеку компонентов Vue для вашего проекта. Спасибо за чтение.

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

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 6 декабря 2022 г.

10 лучших библиотек компонентов Vue