Ui vue: 15 of the Most Interesting Vue UI Component Libraries for 2020

API плагина для UI | Vue CLI

С помощью API cli-ui возможно дополнять конфигурацию и задачи проекта, а также обмениваться данными и взаимодействовать с другими процессами.

Файлы UI

Внутри каждого установленного vue-cli плагина cli-ui попытается загрузить опциональный файл ui.js из корневого каталога плагина. Обратите внимание, также можно использовать каталоги (например, ui/index.js).

Файл должен экспортировать функцию, которая получает объект api в качестве аргумента:

⚠️ Файлы будут перезагружены при получении списка плагинов на странице «Плагины проекта». Чтобы применить изменения, нажмите кнопку «Плагины проекта» в боковой панели слева в UI.

Вот пример структуры каталога для vue-cli плагина, использующего UI API:

Локальные плагины проекта

Если необходим доступ к API плагина в вашем проекте и вы не хотите создавать полноценный плагин для этого, вы можете использовать опцию vuePlugins.ui в файле package.json:

Каждый файл должен экспортировать функцию, получающую API плагина первым аргументом.

Режим разработки

При разработке плагина может потребоваться запустить cli-ui в режиме разработки, чтобы использовать логи с полезной информацией:

Или:

Конфигурации проекта

Вы можете добавить конфигурацию проекта с помощью метода api.describeConfig.

Сначала вам нужно передать некоторую информацию:

Конфигурация иконки

Может быть кодом иконки из Material или пользовательским изображением (см. Публичные статические файлы):

Если не указать иконку, будет отображаться логотип плагина, если таковой есть (см. Логотип).

Файлы конфигураций

По умолчанию конфигурация UI может читать и записывать в один или несколько файлов, например как в .eslintrc.js так и в vue.config.js.

Вы можете указать, какие файлы обнаруживать в проекте пользователя:

Поддерживаемые типы: json, yaml, js, package. Порядок важен: первое имя файла в списке будет использоваться для создания файла конфигурации, если он не существует.

Отображение подсказок конфигурации

Используйте хук onRead чтобы вернуть список подсказок, которые будут отображаться для конфигурации:

Эти подсказки будут отображаться на панели конфигурации.

Для получения дополнительной информации см. Интерактивные подсказки.

Объект data содержит JSON с результатом контента каждого файла конфигурации.

Например, допустим, что у пользователя есть следующий vue.config.js в проекте:

Мы объявляем конфигурационный файл в плагине следующим образом:

Объект data будет:

Пример с несколькими файлами: если мы добавим файл eslintrc.js в проект пользователя:

И изменим опцию files в нашем плагине на это:

Объект data будет:

Вкладки конфигурации

Вы можете организовать подсказки на нескольких вкладках:

Сохранение изменений конфигурации

Используйте хук onWrite для записи данных в файл (или выполнения любого кода nodejs):

Аргументы:

• prompts: текущие объекты подсказок для runtime (см. ниже)
• answers: данные ответов от пользовательского ввода
• data: начальные данные только для чтения, считанные из файлов конфигурации
• files: дескрипторы найденных файлов ({ type: 'json', path: '...' })
• cwd: текущий рабочий каталог
• api: onWrite API (см. ниже)

Объекты подсказок для runtime:

onWrite API:

• assignData(fileId, newData): использует Object.assign для обновление данных конфигурации перед записью.
• setData(fileId, newData): каждый ключ из newData будет установлен (или удалён если значение undefined) в данные конфигурации перед записью.
• async getAnswer(id, mapper): получает ответ для заданного id подсказки и обрабатывает его с помощью функции mapper, если она предоставлена (например, JSON.parse).

Пример (из плагина для ESLint):

Задачи проекта

Задачи создаются из поля scripts файла package.json проекта.

Можно «расширять» задачи дополнительной информацией и хуками через api.describeTask:

Также можно использовать функцию для match:

Иконка задачи

Может быть кодом иконки из Material или пользовательским изображением (см. Публичные статические файлы):

Если не указать иконку, будет отображаться логотип плагина, если таковой есть (см. Логотип).

Параметры задачи

Вы можете добавлять подсказки для изменения аргументов команды. Они будут отображаться в модальном окне «Параметры».

Например:

См. Интерактивные подсказки для более подробной информации.

Хуки задачи

Доступно несколько хуков:

Например, использовать ответы подсказок (см. выше) для добавления аргументов в команду:

Страницы задачи

Вы можете отображать пользовательские представления в панели сведений задачи с помощью ClientAddon API:

См. Клиентское дополнение для более подробной информации.

Добавление новых задач

Также можно добавлять совершенно новые задачи, которые не указаны в package.json с помощью api.addTask вместо api.describeTask. Эти задачи будут отображаться только в пользовательском интерфейсе cli UI.

Вам необходимо указать опцию command вместо match.

Например:

⚠️ command запускается в контексте node. Это означает, что вы можете использовать команды к бинарникам node как обычно, будто из скриптов package.json.

Интерактивные подсказки

Объекты подсказок должен быть корректными объектами inquirer.

Однако, вы можете добавить следующие дополнительные поля (которые являются опциональными и используются только пользовательским интерфейсом):

Поддерживаемые inquirer-типы: checkbox, confirm, input, password, list, rawlist, editor.

В дополнение к ним пользовательский интерфейс поддерживает специальные типы, которые работают только с ним:

• color: интерфейс выбора цвета.

Пример с переключателем

Пример со списком вариантов

Пример с полем ввода

Пример с чекбоксом

Отображает несколько переключателей.

Пример с выбором цвета

Подсказки для вызова

В плагине vue-cli может быть файл prompts.js, который задаёт пользователю несколько вопросов при установке плагина (через CLI или UI). Можно добавить дополнительные поля только для UI (см. выше) к этим объектам подсказок, чтобы они предоставили больше информации, если пользователь использует UI.

⚠️ В настоящее время типы inquirer, которые не поддерживаются (см. выше), не будут работать в UI.

Клиентское дополнение

Клиентское дополнение — это сборка JS, которая динамически загружается в cli-ui. Она полезна для загрузки пользовательских компонентов и маршрутов.

Создание клиентского дополнения

Рекомендуемый способ создания клиентского дополнения — создать новый проект с помощью Vue CLI. Вы можете либо сделать это в подкаталоге вашего плагина, либо в другом npm пакете.

Установите @vue/cli-ui в качестве зависимости для разработки (dev dependency).

Затем добавьте файл vue.config.js со следующим содержимым:

Метод clientAddonConfig генерирует необходимую конфигурацию vue-cli. Кроме того, он отключает извлечение CSS и выводит код в ./dist/index.js в папку клиентского дополнения.

Затем измените файл .eslintrc.json, чтобы добавить несколько глобальных объектов:

Теперь можно запустить скрипт serve для разработки и build, когда будете готовы опубликовать свой плагин.

ClientAddonApi

Откройте файл main.js в исходном коде клиентского дополнения и удалите весь код.

⚠️ Не импортируйте Vue в исходном коде клиентского дополнения, используйте глобальный объект Vue из window браузера.

Вот пример кода для main.js:

Также cli-ui регистрирует Vue и ClientAddonApi глобальными переменными в window.

В компонентах можно использовать все компоненты и CSS классы @vue/ui и @vue/cli-ui, чтобы обеспечить одинаковый внешний вид. Переводить тексты можно с помощью vue-i18n, который используется по умолчанию.

Регистрация клиентского дополнения

Возвращаясь к файлу ui.js, используйте метод api.addClientAddon с строкой запроса к встроенному каталогу:

Будет использован Node.js API require.resolve для поиска каталога в файловой системе и использоваться файл index.js, созданный из клиентского дополнения.

Или укажите URL-адрес при разработке плагина (в идеале вы захотите сделать это в файле vue-cli-ui.js в вашем тестовом проекте vue):

Использование клиентского дополнения

Теперь можно использовать клиентское дополнение в представлениях. Например, вы можете указать представление в описании задачи:

Вот код клиентского дополнения, который регистрирует компонент 'org.vue.webpack.components.dashboard' (как мы видели ранее):

Пользовательские страницы

Можно добавить новую страницу под стандартными «Плагины проекта», «Конфигурация проекта» и «Задачи проекта» с помощью метода api.addView:

Вот пример кода в клиентском дополнении, который регистрирует 'org.vue.webpack.routes.test' (как мы видели ранее):

Общие данные

Используйте общие данные для обмена информацией с пользовательскими компонентами.

Например, панель Webpack предоставляет данные статистики сборки как UI-клиенту так и UI-серверу с помощью этого API.

В файле ui.js плагина (Node.js):

В пользовательском компоненте:

При использовании опции sharedData общие данные можно обновлять просто присвоением нового значения соответствующему свойству.

Это очень удобно, например при создании компонента настроек.

Действия плагина

Действия плагина — это вызовы между cli-ui (браузером) и плагинами (nodejs).

Например, может быть кнопка в пользовательском компоненте (см. клиентское дополнение), которая вызывает некоторый код nodejs на сервере с помощью этого API.

В файле ui.js в плагине (nodejs), вы можете использовать два метода из PluginApi:

Можно указывать версии для пространства имён через api.namespace (как и в общих данных):

В клиентском дополнении (браузере) можно получить доступ к $onPluginActionCalled, $onPluginActionResolved и $callPluginAction:

Коммуникация между процессами (IPC)

IPC означает коммуникацию между процессами. Эта система позволяет легко отправлять сообщения из дочерних процессов (например, задач!). И это довольно быстро и просто.

Для отображения данных в UI на панели управления webpack, команды serve и build из @vue/cli-service отправляют IPC-сообщения на сервер cli-ui nodejs, когда передаётся аргумент --dashboard.

В коде процесса (который может быть Webpack-плагином или скриптом задачи для nodejs), можно использовать класс IpcMessenger из @vue/cli-shared-utils:

Подключение вручную:

Авто-отключение при простое (спустя некоторое время без отправляемых сообщений):

Подключение к другой IPC-сети:

В файле ui.js плагина vue-cli, можно использовать методы ipcOn, ipcOff и ipcSend:

Локальное хранилище

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

Уведомления

Можно показывать уведомления через систему уведомлений операционной системы:

Есть несколько встроенных иконок:

Экран прогресса

Можно показывать экран прогресса с текстом и индикатором:

Удаление экрана прогресса:

Хуки

Хуки позволяют реагировать на определённые события в интерфейсе cli-ui.

onProjectOpen

Вызывается когда плагин был загружен впервые для текущего проекта.

onPluginReload

Вызывается при перезагрузке плагина.

onConfigRead

Вызывается при открытии или обновлении экрана конфигурации.

onConfigWrite

Вызывается при сохранении настроек пользователем на экране конфигурации.

onTaskOpen

Вызывается при открытии пользователем вкладки с детализацией задачи.

onTaskRun

Вызывается при запуске задачи пользователем.

onTaskExit

Вызывается при завершении задачи. Вызывается и при успешном выполнении, и при ошибке.

onViewOpen

Вызывается при открытии страницы (например «Плагины», «Конфигурации» или «Задачи»).

Предположения

Предположения — это кнопки, предназначенные чтобы предложить действия пользователю. Они отображаются в верхней панели. Например, у нас может быть кнопка, предлагающая установить vue-router, если пакет не был обнаружен в приложении.

Затем вы можете удалить предположение:

Можно открыть страницу, когда пользователь активирует предположение, через actionLink:

Как правило, лучше использовать хуки для показа предположений в правильном контексте:

В этом примере мы отображаем только предположение vue-router в представлении плагинов, только если в проекте нет уже установленного vue-router.

Примечание: addSuggestion и removeSuggestion могут задаваться к пространству имён с помощью api.namespace().

Другие методы

hasPlugin

Возвращает true если проект использует плагин.

getCwd

Возвращает текущий рабочий каталог.

resolve

Разрешает файл внутри текущего проекта.

getProject

Получает текущий открытый проект.

Публичные статические файлы

Вам может потребоваться предоставлять некоторые статические файлы поверх встроенного HTTP-сервера cli-ui (обычно, чтобы указать значок для пользовательского представления).

Любой файл в опциональном каталоге ui-public в корневом каталоге пакета плагина станет доступен по HTTP-маршруту /_plugin/:id/*.

Например, если поместить файл my-logo.png в vue-cli-plugin-hello/ui-public/, он будет доступен по URL /_plugin/vue-cli-plugin-hello/my-logo.png, когда cli-ui загружает плагин.

11 библиотек (наборов компонентов) для Vue, о которых стоит знать в 2018-м

⬝ 11 библиотек (наборов компонентов) для Angular, о которых стоит знать в 2018-м
⬝ 11 библиотек (наборов компонентов) для Vue, о которых стоит знать в 2018-м
⬝ 11 библиотек (наборов компонентов) для React, о которых стоит знать в 2018-м

В предыдущей статье мы рассказывали о популярных библиотеках для React. Сегодня представляем вашему вниманию 11 библиотек для Vue, на которые стоит обратить внимание в этом году.

Vue

Анализ статистики загрузок из NPM за последние 6 месяцев говорит о том, что здесь, с большим отрывом от конкурентов, лидирует React, второе место достаётся Angular, а третье — Vue.
Загрузки Vue, Angular и React во второй половине 2017-го года по данным NPM

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

У Vue около 80-ти тысяч звёзд на GitHub, этим фреймворком пользуется множество компаний, среди которых — Adobe и GitLab. Популярность Vue превышает ожидания, и всё указывает на то, что она продолжит расти.

Данные GitHub по Vue, Angular и React по состоянию на 13-е декабря 2017-го года

Значительной части успеха Vue обязан своей компонентной модели. Работа с компонентами Vue, как и в случае с React и Angular, означает разбиение интерфейса на маленькие блоки. Это способствует применению модульного подхода к разработке, повторному использованию таких блоков, поддержанию единообразия внешнего вида приложений. Все компоненты Vue, кроме того, являются и экземплярами Vue, что означает, что они принимают одинаковые объекты с параметрами (за исключением некоторых особенных параметров, нужных для корневого объекта) и предоставляют разработчику одни и те же возможности по обработке событий их жизненного цикла.

Разработка приложения с использованием компонентов Vue

Обсудив в двух словах сам фреймворк, перейдём к описанию библиотек для него.

1. Vuetify

Библиотека Vuetifyjs получила более 7 тысяч звёзд на GitHub. Она даёт разработчикам возможности по созданию пользовательских интерфейсов с использованием принципов Google Material Design. В её релизе V 1.0 Alpha можно найти более 80 компонентов, подходящих для повторного использования и спроектированных с применением семантических принципов, основанных на простых и чётких именах свойств, которые легко запоминать и использовать.

2. Vue Material

Библиотека компонентов vuematerial предоставляет в распоряжение разработчика компоненты, аккуратно следующие принципам Google Material Design. Она набрала порядка 5 тысяч звёзд на GitHub, совместима со всеми современными веб-браузерами, поддерживает динамические темы. Создатели библиотеки стремятся сделать её API как можно более простым и удобным.

3. Keen UI

Библиотека Keen-UI, хотя её разработчики явно черпали идеи из уже не раз упомянутой здесь концепции Material Design, не является настоящим набором Material-компонентов. В её состав входят только компоненты, использующие JavaScript, она не является CSS-фреймворком и не включает в себя систему работы с сеткой или типографские стили. У Keen-UI около 3 тысяч звёзд на GitHub.

4. Element

У весьма популярной библиотеки element, представляющей собой обширный набор настраиваемых компонентов для Vue 2.0, около 21-й тысячи звёзд на GitHub Это впечатляет. Хотя документация к библиотеке изначально рассчитана на людей, которые знают китайский, вокруг element сложилось активное сообщество, труды которого, касающиеся, в том числе, и перевода документации, помогают пользоваться этой библиотекой всем желающим.

5. Buefy

Библиотека Buefy представляет собой набор компонентов, построенных с использованием возможностей Vue и Bulma. На GitHub она собрала около 2 тысяч звёзд, компоненты, которые можно в ней обнаружить, подходят, без дополнительных усилий со стороны разработчика, для создания приложений, использующих отзывчивый дизайн. Хотя компонентов в этой библиотеке не так уж и много, она, определённо, достойна внимания.

6. Bootstrap-Vue

У библиотеки bootstrap-vue имеется порядка 3-х тысяч звёзд на GitHub. Она предназначена для создания отзывчивых веб-приложений, при разработке которых ориентируются, в первую очередь, на мобильные платформы. Библиотека построена на базе Vue и Bootstrap 4. Она предназначена для Vue 2.4+, в ней реализована автоматическая разметка WAI-ARIA, направленная на создание веб-проектов, с которыми удобно работать людям с ограниченными возможностями.

7. AT-UI

Библиотека AT-UI создана специально для настольных веб-приложений. При работе с ней применим техпроцесс, предусматривающий использование NPM, WebPack и Babel. Хотя документация к библиотеке (не впервые в этом обзоре) может вызвать сложности у англоговорящей аудитории, она включает в себя достойную коллекцию простых и удобных компонентов для разработки интерфейсов.

8. Fish-UI

Fish-UI — это набор инструментов для веб-разработки, использующий возможности WebPack и ES2015. Несмотря на скудную документацию, библиотека Fish-UI достойна внимания, так как содержит в себе более 35-ти хорошо структурированных компонентов, позволяющих создавать простые и понятные интерфейсы, не перегруженные ненужными деталями.

9. Quasar

В популярный проект Quasar, обладающий более чем четырьмя тысячами звёзд на GitHub, входят десятки Vue-компонентов, отличающихся богатыми возможностями и подходящими для разработки отзывчивых веб-проектов и гибридных мобильных приложений. Компоненты оформлены в виде Web Components, поэтому они включают в себя HTML-разметку, CSS-стили и код на JavaScript. Это даёт возможность использовать их, просто включая соответствующие им HTML-теги в шаблоны.

10. Muse UI

Библиотека Muse UI, имеющая около 5 тысяч звёзд на GitHub, представляет собой набор компонентов для Vue 2.0, использующих Material Design. Тут, уже в который раз, для погружения в документацию неплохо будет знать китайский, но возможности библиотеки вполне стоят усилий по её освоению.

11. Vux

Весьма популярной библиотеке компонентов Vux досталось около 10 тысяч звёзд на GitHub. Она рассчитана на разработку мобильных приложений, а её создатели вдохновлялись проектом weUI. Библиотека имеет хорошую документацию (оригинал которой написан на китайском), в которой можно найти интерактивные демонстрационные версии компонентов.

Об отдельных компонентах и дополнительных библиотеках

Отдельные компоненты для использования в проектах, основанных на Vue, можно найти на странице awesome-vue в разделе components and libraries. Пожалуй, главное при использовании самостоятельных компонентов заключается в сохранении единообразия пользовательского интерфейса.

Итоги

В этом материале мы рассмотрели популярные библиотеки для Vue. Динамика развития этого веб-фреймворка говорит о том, что в 2018-м к нему вполне могут обратиться очень и очень многие. В его пользу говорят лёгкость освоения, скорость работы и универсальность. Надеемся, наш сегодняшний обзор поможет тем из вас, кто занимается поиском библиотек для своих проектов на Vue, найти именно то, что им нужно.

Уважаемые читатели! Если вы пользуетесь Vue — просим рассказать о библиотеках для этого фреймворка, которые вам нравятся.

Введение — Vue.js

Vue.js

• Обучение

  • Документация

  • • Руководство
    • API
    • Рекомендации
    • Примеры
    • Книга рецептов

  • Видео курсы

  • • Vue Mastery

    • Vue School

• Экосистема

  • Помощь

  • • Форум
    • Чат
    • Митапы

  • Инструментарий

  • • Инструменты разработчика
    • Vue CLI
    • Vue Loader

  • Официальные плагины

  • • Vue Router
    • Vuex
    • Vue Server Renderer

  • Новости

  • • Еженедельные новости
    • Roadmap
    • События
    • Twitter
    • Блог
    • Вакансии
    • Сообщество разработчиков
• Команда
• Ресурсы
  • Партнёры
  • Темы
  • Awesome Vue
  • Найти пакеты для Vue
• Поддержать Vue
  • Единоразовые пожертвования
  • Повторяющиеся взносы
  • Магазин футболок
• Переводы
  • English
  • 中文
  • 日本語
  • 한국어
  • Português
  • Français
  • Tiếng Việt
  • Español
  • Bahasa Indonesia

Специальный спонсор

Платиновые спонсоры

Стать спонсором

Руководство

3.x-beta2.x1.00.120.11

• Основы

• Установка
• Введение
• Экземпляр Vue
• Синтаксис шаблонов
• Вычисляемые свойства и слежение
• Работа с классами и стилями
• Условная отрисовка
• Отрисовка списков
• Обработка событий
• Работа с формами
• Основы компонентов

• Продвинутые компоненты

• Регистрация компонентов
• Входные параметры
• Пользовательские события
• Слоты
• Динамические и асинхронные компоненты
• Обработка крайних случаев

• Переходы и анимации

• Анимирование списков и появления/исчезновения

Введение | Vue CLI

Предупреждение

Эта документация для @vue/cli. Для старой версии vue-cli, см. здесь.

Vue CLI — полноценная система для быстрой разработки на Vue.js, предоставляющая:

• Интерактивное создание проекта через @vue/cli.
• Быстрое прототипирование через @vue/cli + @vue/cli-service-global без конфигурации.
• Runtime-зависимость (@vue/cli-service) предоставляющая:
  • Возможность обновления;
  • Создана поверх webpack, с оптимальными настройками по умолчанию;
  • Настройка с помощью конфигурационного файла в проекте;
  • Расширяемость плагинами
• Большая коллекция официальных плагинов, интегрирующих лучшие инструменты экосистемы фронтенда.
• Полноценный графический пользовательский интерфейс для создания и управления проектами Vue.js.

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

Компоненты системы

Vue CLI состоит из нескольких составных частей — если вы посмотрите на исходный код, то обнаружите, что это монорепозиторий, в котором несколько отдельно опубликованных пакетов.

CLI

CLI (@vue/cli) — это npm-пакет, устанавливаемый глобально и предоставляющий команду vue в терминале. Он позволяет быстро создать новый проект командой vue create, или мгновенно прототипировать ваши новые идеи через vue serve. Также можно управлять проектами в графическом интерфейсе через vue ui. Мы рассмотрим, что он может делать, в следующих разделах руководства.

Сервис CLI

Сервис CLI (@vue/cli-service) — это зависимость для разработки. Это npm-пакет, устанавливаемый локально в каждый проект, создаваемый с помощью @vue/cli.

Сервис CLI построен на основе webpack и webpack-dev-server. Он содержит:

• Ядро сервиса, которое загружает другие плагины для CLI;
• Внутреннюю конфигурацию webpack, оптимизированную для большинства приложений;
• Бинарный файл vue-cli-service внутри проекта, который позволяет использовать команды serve, build и inspect.

Если вы знакомы с create-react-app, то @vue/cli-service похож на react-scripts, хотя набор возможностей и отличается.

В разделе Сервис CLI всё это разбирается подробнее.

Плагины для CLI

Плагины для CLI — это npm-пакеты, которые предоставляют дополнительные возможности для ваших проектов, создаваемых через Vue CLI, такие как транспиляция Babel / TypeScript, интеграция ESLint, модульное тестирование, и E2E-тестирование. Легко определять плагины для Vue CLI, поскольку их имена начинаются с @vue/cli-plugin- (для встроенных плагинов) или vue-cli-plugin- (для плагинов сообщества).

Когда вы запускаете бинарный файл vue-cli-service внутри проекта, он автоматически определяет и загружает все плагины CLI, указанные в файле package.json проекта.

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

15 самых интересных библиотек компонентов пользовательского интерфейса Vue на 2020 год

«Зачем нужны библиотеки компонентов пользовательского интерфейса Vue?» Ну, Vue или Vue.js — это популярная библиотека JavaScript, которую вы можете использовать для создания динамических приложений в интерфейсе пользователя. С момента своего скромного основания в 2014 году он набирает обороты за последние два года. Vue, прогрессивный JavaScript-фреймворк, стал основным конкурентом Angular и React, и одной из причин популярности Vue является широкое использование компонентов, которые значительно упрощают разработку.

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

👉 Примечание для новичков: что такое компонент Vue?

Vue Material Kit — отличный ярлык, который можно использовать для ускорения процесса проектирования / разработки при создании новых сайтов или веб-приложений. Требуются базовые знания JavaScript, Vuejs и Vue Router, но в остальном пакет довольно прост для понимания и красив.

В комплект входят 60 компонентов ручной работы, два настраиваемых плагина и три страницы с примерами.

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

Что делает Vuetify интересным выбором среди лучших библиотек компонентов Vue UI, так это наличие готовых каркасов для кода — в виде готовых шаблонов vue-cli. Это поможет вам быстро начать работу.Vuetify также имеет хорошее сообщество и регулярные обновления.

Buefy — это облегченная библиотека компонентов пользовательского интерфейса, основанная на Vue и Bulma, фреймворке CSS. Эта структура, хотя и поставляется вместе с Bulma, имеет размер менее 100 КБ.

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

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

Имея более 1,7 млн ​​загрузок, он предлагает легкую библиотеку для создания приложений, которые подходят для любого экрана. Библиотека материалов Vue совместима с современными веб-браузерами, а ее API удобен для начинающих, что делает ее идеальной для нашего списка 2020 года.

Fish UI — это легкий набор инструментов библиотеки компонентов пользовательского интерфейса Vue с поддержкой webpack и ES2015.

На момент написания у этого проекта было всего пять участников. Однако в течение последнего месяца наблюдалась некоторая активность, что говорит о том, что она все еще активна. Вы можете перейти к документации проекта, чтобы попробовать!

Quasar — это интерфейсный фреймворк, основанный на Vue. Вам следует учитывать это, если вы планируете работать над адаптивными веб-приложениями и мобильными приложениями. Это полноценный фреймворк, который поддерживает такие функции, как минификация и кеширование, в дополнение к компонентам вашего фреймворка.По состоянию на май 2020 года у него более 14,6 тыс. Звезд на GitHub.

Quasar, пожалуй, самая обширная из всех библиотек компонентов Vue UI, которые мы здесь рассмотрели. Он имеет подробную документацию и надежную сквозную реализацию.

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

Вот живая демонстрация Vux, в которой перечислены все компоненты и их отображение в браузере.

Element — это библиотека компонентов пользовательского интерфейса для Интернета, которая также имеет версии для React и Angular в дополнение к Vue. Эта библиотека компонентов специально предназначена для настольных приложений, поскольку ее компоненты не реагируют.

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

Keen-UI, в отличие от большинства других библиотек компонентов пользовательского интерфейса Vue, представленных в этой статье, фокусируется на интерактивности через JavaScript, а не на визуальных компонентах.Keen-UI вдохновлен материальным дизайном Google и поставляется с простым в использовании API.

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

AT-UI — это еще одна библиотека компонентов Vue UI, ориентированная на настольные приложения.

AT-UI предоставляет простые компоненты пользовательского интерфейса для ваших веб-приложений.Есть 14 участников и мало поддержки, хотя на GitHub есть стартовый шаблон, который вы можете использовать.

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

Mint UI имеет более 15 тысяч звезд на GitHub. Разработка фреймворка все еще идет полным ходом, и в середине января появятся новые коммиты в ветке master.Однако беглый взгляд на трекер проблем на GitHub скажет вам, что пользовательский интерфейс Mint больше всего подходит для китайских разработчиков.

VuePress — генератор статических сайтов на основе Vue. Этот фреймворк использует webpack для создания предварительно отрисованных статических HTML-страниц (как насчет статических сайтов WordPress?), Что значительно ускоряет обработку.

Использование VuePress открывает множество возможностей для вашего проекта — например, автоматизирует процесс документирования. Его также легко интегрировать в существующее приложение.Однако существенным недостатком является то, что поддержка SEO все еще нова, и в документе пока не рассматривается эта тема.

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

Несмотря на то, что Eagle.js предоставляет большое количество примеров на демонстрационном сайте, документация по-прежнему минимальна. Очевидная альтернатива Eagle.js — это Reveal.js, автономный JavaScript-фреймворк для веб-слайд-шоу. Однако Eagle.js преодолевает самый большой недостаток Reveal.js — жесткость структуры слайд-шоу.

Bootstrap-Vue привносит в Vue мощь Bootstrap, широко используемой библиотеки CSS. Он предоставляет вам легкодоступные компоненты пользовательского интерфейса и систему сеток, а также все, что ориентировано на мобильные устройства и адаптивно. Кроме того, компоненты этой библиотеки совместимы с рекомендациями WAI-ARIA для веб-доступности.Следуя философии Bootstrap о быстром создании компонентов пользовательского интерфейса, Bootstrap-Vue позволяет разработчику быстро запустить проект.

Документация обширна, а поддержка сообщества сильна, что делает ее безопасным вариантом для начала проекта.

iView UI — это библиотека во Vue, которая предоставляет компоненты и виджеты пользовательского интерфейса с упором на аккуратный дизайн. iView имеет собственный инструмент интерфейса командной строки (CLI), iView-cli, который предоставляет визуальный инструмент для создания шаблонов компонентов и автономную версию документации.Он активно поддерживается, с регулярными обновлениями, исправляющими ошибки и добавляемыми функциями.

Если вы используете iView в своем проекте, вот стартовый набор, который поможет вам начать базовое использование библиотеки.

Что такое компонент Vue?

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

В этом посте рассматриваются основные компоненты Vue с точки зрения популярности и удобства использования.

Какую библиотеку компонентов пользовательского интерфейса Vue выбрать?

Здесь мы перечислили 15 библиотек компонентов пользовательского интерфейса Vue, которые выполняют различные функции, но какая из них лучше? Что ж, ответ, как обычно, «как бывает». Если вам нужно полное решение, вы можете пойти дальше и выбрать Quasar.С другой стороны, если вы ищете решение plug-and-play для своих существующих проектов, вы можете выбрать Vuetify или Keen-UI.

Какие библиотеки компонентов пользовательского интерфейса Vue вы используете в своих проектах? Сообщите нам об этом в комментариях ниже.

Вас также могут заинтересовать эти статьи:

Не забудьте присоединиться к нашему ускоренному курсу по ускорению вашего сайта WordPress. С помощью некоторых простых исправлений вы можете сократить время загрузки даже на 50-80%:

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

.

библиотек пользовательского интерфейса | Сообщество Vue

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

Большинство библиотек, рассматриваемых в этой главе, основаны на Material Design или Ant Design или обеспечивают интеграцию Vue с некоторыми независимыми от фреймворка библиотеками пользовательского интерфейса, такими как Bootstrap, Bulma или Uikit.

Сводка (TL; DR)

Если у вас нет времени прочитать все это и вам нужен быстрый ответ:

Выбор пользователей

Vuetify — мобильная и настольная версия, материальный дизайн.
Quasar — тоже фреймворк материального дизайна, но с кроссплатформенными возможностями.

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

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

Вот несколько тем, которые следует осветить:

• Вам действительно нужна библиотека пользовательского интерфейса?
• как вы планируете подходить к мобильной версии вашего веб-сайта или приложения
• вас устраивает библиотека, которая не обеспечивает всестороннюю поддержку и большое сообщество
• какие компоненты важны для вашего проекта
• насколько важна SEO для вашего планируете ли вы использовать рендеринг на стороне сервера?
• доступность

Материальный дизайн

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

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

Vuetify Popular

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

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

Экосистема библиотеки предоставляет множество инструментов, таких как генератор тем, загрузчик Webpack или упрямая конфигурация Eslint. Также легко реализовать Vuetify в вашем приложении благодаря предоставленным плагинам для Vue CLI и Nuxt.

Внутри Vuetify написан на Typescript. Предстоящий выпуск Vuetify 2 с улучшенной системой тем, доступностью и производительностью также приведет к переходу от Stylus к SASS.

Quasar Popular

Огромный пул качественных компонентов, готовых для непосредственного внедрения в существующие или новые проекты уже сегодня.Плюс простой в использовании процесс сборки, полностью настраиваемый (хотя в 99% случаев вам даже не нужно его трогать) … с соблюдением всех новейших и лучших лучших веб-практик. Быстрый запуск SPA, PWA, SSR, мобильного или настольного приложения за 30 секунд … (да, это так просто!)

Quasar делает упор на удобство разработки. Он предлагает собственный интерфейс командной строки, который помогает пользователям создавать приложения для нескольких платформ, включая мобильные приложения через Cordova, настольные приложения через Electron и PWA или SPA с рендерингом на стороне сервера (SSR) или без него.У него растущее сообщество и отличная команда разработчиков, которые уделяют проекту много времени.

Одной из функций, которая отличает Quasar от практически всех других фреймворков, является его система расширения приложений (или сокращенно AE), в которой разработчики могут не только использовать систему AE для импорта общего кода для своих собственных проектов, но и совместно использовать ее. код с общим сообществом Quasar. Это мощная система, которая позволяет расширять проекты Quasar с помощью любого количества различных дополнений, таких как другие компоненты, добавления команд CLI и даже функции приложений.Отличным примером является QCalendar — сложный компонент для создания календарей.

Vue Material

Простой, легкий и созданный в точном соответствии со спецификациями Google Material Design.

Разница в популярности велика, но если вы ищете библиотеку, которая в точности следует принципам материального дизайна, попробуйте.

Ant Design

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

Причина? Подобно тому, как Material Design был создан Google, AntD создан дизайнерами из Alibaba — крупнейшей компании электронной коммерции в Китае. Он специально нацелен на китайский веб-рынок, где традиционные веб-сайты обычно не доступны с мобильных устройств. Такие библиотеки часто предоставляют отдельные решения для мобильных приложений на основе отдельной спецификации And Design Mobile.

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

Помимо стандартных веб-сайтов, Ant Design — хороший выбор для разработчиков, пишущих все виды систем администрирования.

Element UI, популярный для настольных ПК

В мировом контексте Element UI — самая популярная библиотека пользовательского интерфейса для Vue.js и одна из старейших в экосистеме. Он также поставляется с мобильным родственником — пользовательским интерфейсом Mint, который можно использовать для написания гибридного приложения. У него правильная документация на английском языке и дополнительный международный чат, но большинство проблем с Github на китайском языке.

Element UI предоставляет стартовые наборы как для общего использования, так и для проектов Laravel, а также для привязок Typescript. Доступен богатый выбор компонентов, и их можно импортировать по запросу. Стили написаны с использованием SCSS с методологией БЭМ.

Успех библиотеки привел к переносу пользовательского интерфейса Element на экосистемы Angular и React.

iView

Хотя Iview не так хорошо известен, как Element UI, он является действующей и хорошо поддерживаемой альтернативой. Он предоставляет большой набор компонентов, которые мы можем импортировать по запросу, и полезные инструменты для облегчения работы с ними, а также поддержку Typescript и официальный шаблон панели администратора.Это хороший выбор, особенно если вы предпочитаете работать с LESS вместо SASS.

Наборы компонентов для CSS-фреймворков

Третья группа UI-библиотек включает те, которые предоставляют наборы компонентов для традиционных CSS-фреймворков. Как те, которые изначально содержат функции Javascript, такие как Bootstrap, Semantic UI или UIKit, так и чисто CSS, такие как Bulma. Это хороший вариант, если вы ищете какой-то определенный стиль дизайна, вы уже знакомы с фреймворком CSS или хотите переписать уже существующее приложение, которое использует один из них.

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

BootstrapVue Выбор Backender

BootstrapVue предоставляет одну из наиболее полных реализаций компонентов Bootstrap V4.3 и системы сеток, доступных для Vue.js 2.6+, в комплекте с обширной и автоматизированной разметкой доступности WAI-ARIA.

Если вы хотите использовать Bootstrap 4 для своего проекта, BootstrapVue является наиболее частой рекомендацией сообщества.Это набор компонентов, изначально написанных с помощью Vue.js, поэтому вам не нужно беспокоиться о смешивании Vue с JQuery. Его легко использовать как с Vue CLI, так и с Nuxt.

BootstrapVue также включает несколько настраиваемых компонентов на основе стиля Bootstrap v4.

Buefy

Bulma превратилась в одну из лучших CSS-фреймворков, но в отличие от большинства из них, она не предлагает никаких функций Javascript. Вот где в игру вступает Буэфи. Он предоставляет как набор компонентов, так и простой способ интеграции Bulma в ваш проект.

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

Vuikit

Vuikit — это библиотека интеграции Vue, которая предоставляет оболочки для фреймворка Uikit. Хотя Uikit не так хорошо известен в экосистеме Vue.js, как Bootstrap или Bulma, Uikit — это надежная библиотека, которая охватывает широкий спектр компонентов CSS и JS с некоторыми уникальными функциями, которые вы не найдете нигде из коробки.

Semantic-UI-Vue

Несмотря на свою популярность, Semantic UI никогда не находил применения в Vue.js экосистема. Однако было несколько проектов, пытающихся обеспечить хорошую интеграцию с Vue. Из них наиболее примечательным является Semantic-UI-Vue, вдохновленный аналогичным проектом из экосистемы React.

vectre

Spectre.CSS — это легкий, отзывчивый и современный CSS-фреймворк для более быстрой и расширяемой разработки. Отличительной чертой этого фреймворка является его крошечный размер и единый язык дизайна. Но до этого момента не было полной реализации большинства компонентов ни в одной экосистеме.Это было мотивацией для создания быстрой, небольшой и удобной для пользователя среды Vectre, которая будет иметь современные функции, такие как поддержка машинописного текста / tsx, встряхивание дерева, несколько систем модулей JavaScript и, конечно же, крошечный размер.

Другие решения

Tailwind CSS Самый гибкий

Утилитарный CSS-фреймворк для быстрого создания пользовательских интерфейсов.

Tailwind очень хорошо принят в сообществе Vue, поскольку он прекрасно интегрируется с концепцией компонентов.Интеграция так же проста, как установка Tailwind, создание конфигурации и ее импорт в ваше приложение.

VueSax

Цель VueSax — предоставить библиотеку пользовательского интерфейса, ориентированную на основные функции JS. Хотя он предлагает дизайн по умолчанию, основанный на теплой цветовой палитре, не зависит от какого-либо конкретного языка дизайна или инфраструктуры CSS и по умолчанию использует собственные переменные CSS, а не препроцессоры.

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

Inkline Developer Experience

Inkline — это современная UI / UX Framework для Vue.js, предназначенная для создания безупречно отзывчивых веб-приложений.

Inkline предоставляет вам более 50 настраиваемых компонентов, сотни служебных классов и встроенную проверку форм на основе схемы. Фреймворк был выбран финалистом конкурса Open Source Awards на Vue.js London 2019 в категории Developer Experience.

Vuetensils

«Голая» библиотека компонентов для создания доступных, легких, фирменных приложений.

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

Chakra UI

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

Хотя это зависит от CSS-in-JS под капотом, вам не нужно знать его, чтобы использовать библиотеку.

.

UI API | Vue CLI

cli-ui предоставляет API, который позволяет расширять конфигурации и задачи проекта, а также обмениваться данными и взаимодействовать с другими процессами.

UI-файлы

Внутри каждого установленного плагина vue-cli cli-ui попытается загрузить дополнительный файл ui.js в корневую папку плагина. Обратите внимание, что вы также можете использовать папки (например, ui / index.js ).

Файл должен экспортировать функцию, которая получает объект api в качестве аргумента:

⚠️ Файлы будут перезагружены при получении списка плагинов в представлении «Плагины проекта».Чтобы применить изменения, нажмите кнопку «Плагины проекта» на боковой панели навигации слева в пользовательском интерфейсе.

Вот пример структуры папок для плагина vue-cli с использованием UI API:

Локальные плагины проекта

Если вам нужен доступ к API плагина в вашем проекте и вы не хотите создавать для него полноценный плагин , вы можете использовать параметр vuePlugins.ui в вашем файле package.json :

Каждый файл должен будет экспортировать функцию, использующую API плагина в качестве первого аргумента.

Режим разработки

При создании плагина вы можете захотеть запустить cli-ui в режиме разработки, чтобы он выводил вам полезные журналы:

Или:

Конфигурации проекта

Вы можете добавить проект конфигурация с помощью метода api.describeConfig .

Сначала вам нужно передать некоторую информацию:

WARNING

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

Значок конфигурации

Это может быть код значка материала или пользовательское изображение (см. Общедоступные статические файлы):

Если вы не укажете значок, будет отображаться логотип плагина, если он есть (см. Логотип).

Файлы конфигурации

По умолчанию пользовательский интерфейс конфигурации может читать и записывать в один или несколько файлов конфигурации, например .eslintrc.js и vue.config.js .

Вы можете указать, какие файлы могут быть обнаружены в пользовательском проекте:

Поддерживаемые типы: json , yaml , js , package .Порядок важен: первое имя файла в списке будет использоваться для создания файла конфигурации, если он не существует.

Отобразить подсказки конфигурации

Используйте обработчик onRead , чтобы вернуть список подсказок, которые будут отображаться для конфигурации:

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

См. «Подсказки» для получения дополнительной информации.

Объект data содержит результат JSON для каждого содержимого файла конфигурации.

Например, предположим, что у пользователя есть следующий номер vue.config.js в своем проекте:

Мы объявляем файл конфигурации в нашем плагине следующим образом:

Тогда объект data будет:

Пример нескольких файлов: если мы добавим следующий файл eslintrc.js в пользовательский проект:

И измените опцию files в нашем плагине на это:

Тогда объект data будет:

Вкладки конфигурации

Вы можете организовать подсказки в несколько вкладок:

Сохранить изменения конфигурации

Используйте ловушку onWrite для записи данных в файл конфигурации (или выполнения любого кода nodejs):

Аргументы:

• подсказок : текущие объекты времени выполнения подсказок (см. Ниже)
• ответы : ответы данные из пользовательских входов
• данные : исходные данные только для чтения, считанные из файлов конфигурации
• файлов : дескрипторы найденных файлов ( {тип: 'json', путь: '... '} )
• cwd : текущий рабочий каталог
• api : onWrite API (см. Ниже)

Запрашивает объекты времени выполнения:

onWrite API:

• 9000Id assignData , newData) : используйте Object.assign для обновления данных конфигурации перед записью.
• setData (fileId, newData) : каждый ключ из newData будет глубоко установлен (или удален, если undefined value) для данных конфигурации перед записью.
• async getAnswer (id, mapper) : получить ответ для данного идентификатора приглашения и сопоставить его с помощью функции mapper , если она предоставлена ​​(например, JSON.parse ).

Пример (из плагина ESLint):

Задачи проекта

Задачи генерируются из поля scripts в файле project package.json .

Вы можете «дополнить» задачи дополнительной информацией и хуками благодаря api.describeTask method:

Вы также можете использовать функцию для match :

Значок задачи

Это может быть либо код значка материала, либо пользовательское изображение (см. Общедоступные статические файлы):

значок, будет отображаться логотип плагина, если он есть (см. Логотип).

Параметры задач

Вы можете добавить подсказки для изменения аргументов команды. Они будут отображаться в модальном окне «Параметры».

Пример:

Дополнительные сведения см. В разделе «Подсказки».

Перехватчики задач

Доступно несколько перехватчиков:

Например, вы можете использовать ответы на запросы (см. Выше), чтобы добавить новые аргументы в команду:

Представления задач

Вы можете отображать настраиваемые представления в задаче панель сведений с использованием ClientAddon API:

Дополнительные сведения см. в разделе «Клиентское дополнение».

Добавить новые задачи

Вы также можете добавить совершенно новые задачи, которых нет в package.json скриптах с api.addTask вместо api.describeTask . Эти задачи будут отображаться только в пользовательском интерфейсе cli.

Необходимо указать опцию команды вместо match .

Пример:

⚠️ Команда запустит контекст узла. Это означает, что вы можете вызывать команды узла bin, как обычно в сценариях package.json .

Подсказки

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

Однако вы можете добавить следующие дополнительные поля (которые являются необязательными и используются только пользовательским интерфейсом):

Поддерживаемые типы запросов: флажок , подтвердить , введите , пароль , список , rawlist , редактор .

Вдобавок пользовательский интерфейс поддерживает специальные типы, которые работают только с ним:

• цвет : отображает палитру цветов.

Пример переключателя

Выберите пример

Пример ввода

Пример флажка

Отображает несколько переключателей.

Пример выбора цвета

Запросы на вызов

В вашем плагине vue-cli у вас уже может быть файл prompts.js , который задает пользователю несколько вопросов при установке плагина (с помощью интерфейса командной строки или пользовательского интерфейса). Вы также можете добавить дополнительные поля только для пользовательского интерфейса (см. Выше) к этим объектам подсказок, чтобы они предоставляли дополнительную информацию, если пользователь использует пользовательский интерфейс.

⚠️ В настоящее время типы запросов, которые не поддерживаются (см. Выше), не будут правильно работать в пользовательском интерфейсе.

Клиентское дополнение

Клиентское дополнение - это пакет JS, который динамически загружается в cli-ui. Полезно загружать пользовательские компоненты и маршруты.

Создание клиентской надстройки

Рекомендуемый способ создания клиентской надстройки - это создание нового проекта с помощью vue cli. Вы можете сделать это в подпапке вашего плагина или в другом пакете npm.

Установите @ vue / cli-ui как зависимость разработчика.

Затем добавьте vue.config.js со следующим содержимым:

Метод clientAddonConfig сгенерирует необходимую конфигурацию vue-cli. Помимо прочего, он отключает извлечение CSS и выводит код на ./dist/index.js в папке клиентских надстроек.

WARNING

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

Затем измените .eslintrc.json , чтобы добавить некоторые разрешенные глобальные объекты:

Теперь вы можете запустить сценарий serve в разработке и сценарий build , когда вы будете готовы опубликовать свой плагин.

ClientAddonApi

Откройте файл main.js в исходниках клиентского дополнения и удалите весь код.

⚠️ Не импортируйте Vue в исходники клиентского дополнения, используйте глобальный объект Vue из окна браузера .

Вот пример кода для main.js :

WARNING

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

Cli-ui регистрирует Vue и ClientAddonApi как глобальные переменные в области окна .

В своих компонентах вы можете использовать все компоненты и классы CSS @ vue / ui и @ vue / cli-ui, чтобы сохранить согласованный внешний вид. Вы также можете переводить строки с помощью vue-i18n, который включен.

Зарегистрируйте клиентское дополнение

Вернитесь к файлу ui.js , используйте метод api.addClientAddon с запросом require к созданной папке:

Это будет использовать API nodejs require.resolve для поиска в папке и обслуживайте файл index.js , созданный из клиентского дополнения.

Или укажите URL-адрес при разработке плагина (в идеале вы хотите сделать это в файле vue-cli-ui.js в вашем тестовом проекте vue):

Используйте клиентское дополнение

Теперь вы можете использовать клиент аддон в представлениях.Например, вы можете указать представление в описанной задаче:

Вот код расширения клиента, который регистрирует компонент 'org.vue.webpack.components.dashboard' (как мы видели ранее):

Custom views

Вы можете добавить новое представление под стандартными «Плагины проекта», «Конфигурация проекта» и «Задачи проекта», используя метод api.addView :

Вот код в клиентском надстройке, который регистрирует 'org.vue.webpack.routes.test ' (как мы видели ранее):

Общие данные

Используйте общие данные, чтобы легко обмениваться информацией с пользовательскими компонентами.

Например, панель управления Webpack разделяет статистику сборки между клиентом пользовательского интерфейса и сервером пользовательского интерфейса с помощью этого API.

В подключаемом модуле ui.js (nodejs):

ПРЕДУПРЕЖДЕНИЕ

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

В пользовательском компоненте:

Если вы используете опцию sharedData , общие данные можно обновить, присвоив новое значение соответствующему свойству.

Это очень полезно, например, если вы создаете компонент настроек.

Действия плагина

Действия плагина - это вызовы, отправляемые между cli-ui (браузером) и плагинами (nodejs).

Например, у вас может быть кнопка в пользовательском компоненте (см. Клиентское дополнение), которая вызывает некоторый код nodejs на сервере с помощью этого API.

В файле ui.js в подключаемом модуле (nodejs) вы можете использовать два метода из PluginApi :

ПРЕДУПРЕЖДЕНИЕ

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

Вы можете использовать версии с пространством имен с api.namespace (аналогично Shared data):

В компонентах клиентского надстройки (браузере) у вас есть доступ к $ onPluginActionCalled , $ onPluginActionResolved и $ callPluginAction :

Межпроцессное взаимодействие (IPC)

IPC означает межпроцессное взаимодействие.Эта система позволяет легко отправлять сообщения от дочерних процессов (например, задач!). И это довольно быстро и легко.

Для отображения данных в пользовательском интерфейсе панели управления webpack, обслуживают команды и build из @ vue / cli-service отправляют сообщения IPC на сервер cli-ui nodejs, когда аргумент --dashboard имеет значение передано.

В коде процесса (который может быть плагином Webpack или сценарием задачи nodejs) вы можете использовать класс IpcMessenger из @ vue / cli-shared-utils :

Подключение вручную:

Автоматическое отключение в режиме ожидания (через некоторое время без отправки сообщения):

Подключение к другой сети IPC:

В плагине vue-cli ui.js , вы можете использовать методы ipcOn , ipcOff и ipcSend :

Локальное хранилище

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

WARNING

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

Уведомление

Вы можете отображать уведомления с помощью системы уведомлений ОС пользователя:

Есть несколько встроенных значков:

Экран выполнения

Вы можете отобразить экран выполнения с некоторым текстом и полосой выполнения:

Удалить экран выполнения :

Хуки

Хуки позволяют реагировать на определенные события cli-ui.

onProjectOpen

Вызывается, когда подключаемый модуль загружается в первый раз для текущего проекта.

onPluginReload

Вызывается при перезагрузке плагина.

onConfigRead

Вызывается, когда экран конфигурации открыт или обновлен.

onConfigWrite

Вызывается, когда пользователь сохраняет на экране конфигурации.

.

PrimeVue | Библиотека компонентов пользовательского интерфейса Vue

PrimeVue | Библиотека компонентов пользовательского интерфейса Vue

Мощный, но простой в использовании, универсальный, производительный Vue
Библиотека компонентов пользовательского интерфейса, которая поможет вам создавать потрясающие пользовательские интерфейсы.

Демо

Начать

Также доступно для Angular, React и Java.

Создателем PrimeVue является PrimeTek Informatics, выдающийся поставщик библиотек компонентов, создавший
популярные проекты с открытым исходным кодом, такие как PrimeFaces, PrimeNG и PrimeReact за последние годы.

Создавайте привлекательные формы с широким спектром компонентов форм, совместимых с API Vue Form.

Учить больше

Многочисленные компоненты данных, позволяющие с легкостью управлять огромными наборами данных
с самым мощным компонентом Vue DataTable с обширным набором функций.

Учить больше

Организуйте свой контент с легкостью, используя компоненты контейнера вместе с дополнительной библиотекой PrimeFlex Grid Library.

Учить больше

Широкий спектр компонентов меню, созданных с использованием API MenuModel, который обеспечивает расширенную интеграцию с Vue Router.

Учить больше

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

Учить больше

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

PrimeVue - это библиотека, не зависящая от дизайна, а система тем основана на Theme Designer, официальном
инструмент для создания тем для компонентов.

Designer включает в себя инфраструктуру с поддержкой SASS, насчитывающую более 500
настраиваемые переменные, живой редактор и приложение Vue-CLI для легкого тестирования ваших тем, а также встроенные
образцы тем, встроенные в PrimeVue Core.

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

Учить больше

Нет времени ждать ответа на форуме или в системе отслеживания проблем? Тогда служба поддержки PrimeVue PRO определенно для вас.

PrimeVUE PRO - это исключительная служба поддержки, где вы можете связаться с PrimeTek через частный канал.
и получите помощь буквально через пару часов.При желании PrimeVue PRO предлагает возможность
для запроса изменений и новых функций для библиотеки компонентов.

Учить больше

▲

.