Выпущена официальная версия Element Plus! 🎉🎉

внешний интерфейс Vue.js
Выпущена официальная версия Element Plus! 🎉🎉

Сегодня мы очень рады объявить об официальном выпуске стабильной версии Element Plus. С момента первого коммита, после 1 года и 7 месяцев непрерывной итеративной разработки, в общей сложности 2635 коммитов, 2494 PR, 137 альфа- и бета-версий, представленных 256 участниками, каждый студент в сообществе участвовал. С помощью, первая официальная версия Element Plus наконец-то встречает всех.

Основное обновление

TypeScript и Vue 3

Element Plus разработан с использованием TypeScript и Vue 3.2 и предоставляет полный файл определения типа. И используйте Composition API, чтобы уменьшить связанность и упростить логику.

совместимость

Поскольку Vue 3 больше не совместим с IE, Element Plus также повысил минимальную совместимую версию.

image.png image.png image.png image.png
Край ≥ 79. Фаерфокс ≥ 78 Хром ≥ 64 Сафари ≥ 12

Если вы хотите нормально использовать Element Plus в браузерах более ранних версий, используйте Babel, ESBuild или другие инструменты преобразования и введите соответствующий полифилл. Стоит отметить, что Element Plus использует ResizeObserver, если вам нужна совместимость, вам нужно внедрить его самостоятельно.resize-observer-polyfill. Для получения подробной информации см.Совместимость ResizeObserver.

ЕСМ и ЗАО

Element Plus поддерживает форматы ESM, CJS и UMD. В обычных условиях вам не нужно обращать внимание на импортированный формат.Инструмент сборки автоматически сопоставит и преобразует его в целевой формат.В то же время не требуется дополнительной настройки, и он поддерживает возможности загрузки по требованию .

дизайн

Система размеров компонентов определяетсяdefault/medium/small/miniперейти на более натуральныйlarge/default/small,кdefaultВ качестве основы, если вам нужно его увеличить, выберитеlarge, если вам нужно уменьшить масштаб, выберитеsmall.

Аспект заполнения оптимизирован для более общей системы 4px, используя 4/8 пикселей в качестве атомарной единицы для управления согласованностью заполнения всей системы. То есть отступы больших компонентов тоже большие, а отступы мелких компонентов тоже маленькие. Для получения подробной информации см.описание изменения размера.

значок

Чтобы использовать встроенные значки в Element Plus, пользователям часто необходимо ссылаться на~75KBфайлы шрифтов и 1 дополнительный сетевой запрос, который в большинстве случаев совершенно не нужен и является долговременной головной болью для пользователей, которые очень обеспокоены размером и скоростью загрузки домашней страницы.

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

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

настроить

Element Plus добавляет новый компонент для глобального управления конфигурациейconfig-provider, чтобы заменить глобальную конфигурацию Element UIVue.prototype.$ELEMENT. Вы можете выполнить глобальную настройку следующими двумя способами.

// 方式一 main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')

// 方式二 APP.vue
<template>
  <el-config-provider :size="small">
    <el-button>Button</el-button>
  </el-config-provider>
</template>

Дополнительные сведения об изменениях API см.Руководство по несовместимым изменениям и обновлениям Element Plus.

Новые компоненты и ресурсы для проектирования

На основе миграции существующих компонентов официальная версия добавляетSpace, Skeleton, Emptyа такжеAffixЧетыре новых компонента расширяют выбор разработчиков. а также добавление использования виртуальной прокруткиSelect-V2компонент для оптимизации проблем с производительностью отображения для длинных списков.

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

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

темная тема

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

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

Когда бета-версия была выпущена, мы упомянули о предоставлении таблиц, которые используют возможности виртуализации для оптимизации производительности компонента «Таблица» в случае больших объемов данных. Однако эта часть функции не включена в релиз официальной версии, но будет добавлена ​​в последующих итерациях. Большая часть причин, по которым эта функция не была реализована, заключается в том, что мы изучали, какой метод больше подходит для пользователей. Либо мы напрямую добавляем механизм рендеринга виртуализированных таблиц, либо мы предоставляем интерфейс рендеринга, чтобы пользователи могли добавлять виртуализированные компоненты (например, vue-virtual-scroller) для самостоятельного рендеринга. В дальнейшем мы обратимся к реализации сопутствующих компонентов на рынке и предоставим набор решений, облегчающих использование табличного компонента Element Plus.

Связанная экология

Категории