Сравнение библиотек компонентов Vue — HeyUI, iView, Element

внешний интерфейс Element Vue.js iView
Сравнение библиотек компонентов Vue — HeyUI, iView, Element

В настоящее время основной библиотекой компонентов Vue на рынке, вероятно, является iview, element.
Конечно, Хэюи не в поле зрения, есть всего несколько звезд из 38, и большинство из них — коллеги, которых они знают.
Что еще более отвратительно, так это то, что у звезды, которая не может обмануть одноклассников на заднем плане, разбито сердце.

Спросите звездочку (маленькая 💕💕):Github

Официальный сайт:www.heyui.top

О сравнении

Для сравнения у меня всего несколько широт:

  • С чего начать
  • Функции
  • вызов компонента
  • Размер проекта и зависимости
  • использование

С чего начать

нагрузка по требованию

И element, и iview поддерживают загрузку по запросу.
хеюи не поддерживает.
Я долго думал, стоит ли поддерживать загрузку по требованию.
Может, с element и iview все в порядке, но если heyui использовать в разделенных компонентах, общее преимущество невелико, и я представлю его позже.

настройка стиля

На самом деле, три компонента здесь похожи. Element использует scss, iview и heyui используют меньше, и вы можете использовать переопределение переменных.
element предоставляет инструмент для генерации темы, а также есть инструмент для iview, но это путь в начале, а теперь все рекомендуют способ переменного покрытия.
Здесь я собираюсь порекомендовать наши лесаhey-cli, я поставил эти переменные не в способ переопределения, а в способ глобализации.
Таким образом, ваш @primary-color также можно использовать в vue.<style lang="less"/>используется в.
Ссылаться на:демонстрация heyui в hey-cli-template
Или взгляните на:Убийца фронтенд-разработки hey-cli

глобализация

И element, и iview поддерживают интернационализацию.
хеюи не поддерживает.
грустный.
Что ж, если вам нужен проект с поддержкой интернационализации, пожалуйста, перейдите к элементу, iview.
Хочу сказать, что на самом деле механизм интернационализации хэюи уже написан, а поддержки переводчика нет, желающие могут прийти ко мне.

Суммировать

На самом деле, загрузка по требованию и интернационализация — это очень мало потребностей, загрузка по требованию, я не должен поддерживать этот аспект.
Если есть люди с другим мнением, добро пожаловать на обсуждение.
PS: при загрузке по требованию по-прежнему необходимо загружать все стили.
Что касается интернационализации, если есть потребность или кто-то, кто может помочь, пожалуйста, свяжитесь с нами.

Функции

список функций

Приближается основное сравнение функций.

На самом деле функции element и iview схожи, а heyui относительно отличается от них.
Во-первых, все основные компоненты есть, так в чем же разница?
Компоненты, уникальные для хэюи:

Компоненты, которых нет у heyui:

  • Раздаточная коробка челнока: есть альтернативные компоненты
  • Cascader Выбор каскада: альтернативные компоненты
  • Навигация: стили
  • Карусель Карусель: Я бы выбрал Swiper.
  • Свернуть панели-гармошки: стили
  • Аватар Аватары: Стили
  • Оповещение с предупреждением: стиль
  • Палитра цветов ColorPicker: Браузер поставляется с этим компонентом, но если спрос больше, вы можете рассмотреть возможность его добавления.

По сути, это сравнение трех компонентных библиотек.
Если судить по тому, есть ли определенный компонент, то на самом деле библиотеки компонентов element и iview очень похожи.
Что касается heyui, то из первоначального замысла своей разработки я в основном ориентируюсь на универсальность и масштабируемость.
Судя по приведенному выше сравнению, у heyui не так много компонентов стиля, ведь вначале были ссылки на iview и element, а также были разработаны теги и панели.
Оказывается, он редко используется.
Потому что у каждого системного разработчика своя идея.
Вместо этого я разработалРасширить расширение стиля, который в основном основан на опыте и имеет широкий спектр применения.
также разработанDropdownПользовательский раскрывающийся список, они лучше для масштабируемости выше.

вызов компонента

На самом деле вызовы компонентов между element и iview примерно одинаковы.
Есть некоторые отличия в основном в некоторых деталях и функциях.

именование компонентов

Элемент называется через тире, например: h-table
iview и heyui называются в верблюжьем регистре, например: Table

В этом плане iview имеет преимущество перед heyui, а читабельность кода имеет большее преимущество.

Функциональность компонента

элемент имеет общее преимущество в функциональности компонента.
Большинство компонентов обеспечивают большую функциональность.
Что касается компонента таблицы, параметр заключается в том, что две страницы не могут быть прочитаны, а iview больше, чем heyui.
Но, подобно дереву или автозаполнению, реализация heyui более низкоуровневая, более расширяемая и более сложная, чем element и iview.

управляемый данными

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

В качестве примера возьмем простейший компонент Select.

Как называется элемент

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

Как позвонить в iView

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

Как позвонить в HeyUI

<template>
  <div v-padding="40">
    <Radio v-model="value" :datas="options"></Radio>
    <div v-height="20"></div>
    <Select v-model="value" :datas="options" placeholder="请选择"></Select>
    <div v-height="20"></div>
    <Tabs v-model="value" :datas="options"></Tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          key: "a",
          title: "黄金糕"
        },
        {
          key: "b",
          title: "双皮奶"
        },
        {
          key: "c",
          title: "蚵仔煎"
        },
        {
          key: "d",
          title: "龙须面"
        },
        {
          key: "e",
          title: "北京烤鸭"
        }
      ],
      value: "a"
    };
  }
};
</script>

фактический эффект

Ссылка на код:код sandbox.io / yes / садись 0 последовательный v6 ты…, нажмите кнопку demo1

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

Размер проекта и зависимости

Тут, собственно, меня все же больше волнует, ведь размер и зависимости проекта все-таки важнее.

Размер проекта

Ха-ха, я чувствую, что HeyUI немного выигрывает.

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

Затем CSS iView сначала напрямую использовался в Ant Design.На самом деле, дизайн Ant Design относительно более великолепен, поэтому CSS относительно больше.Однако позже iView претерпел множество изменений, что сильно отличается от Ant Design Большой, то есть размер CSS не уменьшился.

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

зависимости проекта

На самом деле проект зависит от вышеперечисленного, хэюи, можно сказать, что нет.
hey-log: console.log -> логировать гаджет собственного дома
hey-utils: Общий метод вашего собственного дома
manba: инструмент даты, написанный вами

А element и iview, на самом деле, в основном зависят отasync-validatorиdeepmerge,иpopper.js.
фактическиdeepmergeЯ написал это самhey-utilsЭто тоже там.
async-validator, вообще-то я сам это написалhey-validator.

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

Как я уже говорил, я должен былИспользуйте только свой собственный кодбольной!!!(сильно)

использование

количество представлений

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

количество звезд

На самом деле по количеству звезд сравнивать не буду, 100 000 единиц урона.
Много звезд также означает больше пользователей, больше тестировщиков и относительно меньше ошибок.

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

вопросы

Каждый может использовать хэюи (льстивую улыбку).

Сводка по использованию

Здесь я не буду приводить некоторые сравнения загрузок npm.

На самом деле Element впереди, независимо от количества звезд или количества выдач, но это не значит, что у Element больше преимуществ, на самом деле я сам пишу библиотеку vue-компонентов, и относительно эти два компонента мне ясны. библиотеки.

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

окончательное резюме

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

Категории