Здравствуйте, @idux, появилась новая библиотека компонентов vue 3.x.

• Автор этой статьи:DanranVm

@iduxоснован наVue 3.xиTypeScriptРазработана библиотека компонентов с открытым исходным кодом, она имеет следующие особенности:

• Режим управления монорепозиторием:cdk, components, pro
• Качественные компоненты из коробки
• Полностью используйте Composition API, от исходного кода до документации.
• Полностью разработан на TypeScript, предоставляя полные определения типов.
• Гибкая глобальная конфигурация
• Глубокие возможности настройки темы
• Интернациональная языковая поддержка

Ссылки по теме:

• Github: IDuxFE/idux
• Официальная документация:idux.site

характеристика

Режим монорепозитория

@iduxВсего разбито на 3 пакета:

• @idux/cdk
  • Это набор средств разработки для создания библиотек компонентов пользовательского интерфейса.
  • Он в основном содержит некоторые независимые от пользовательского интерфейса или легкие функции пользовательского интерфейса.
  • Вдохновлен@angular/cdk
• @idux/components
  • Это базовая библиотека компонентов в традиционном смысле, содержащая десятки обычных компонентов пользовательского интерфейса.
  • Мы тщательно разработали API каждого компонента, чтобы обеспечить согласованность API.
  • Справочник по проектированию компонентовantdиng-zorro
• @idux/pro
  • это правильно@idux/componentsДальнейшая инкапсуляция и комбинация, использование меньшего количества кода для завершения развития бизнеса
  • В основном это происходит от нашей переработки нашего собственного бизнеса
  • В настоящее время его количество ограничено, и мы будем добавлять его постепенно.

из коробки

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

import { IxButton } from "@idux/components/button";

Узнать большеНачать быстро

у нас есть покрытие80+Модульное тестирование и комплексный процесс непрерывной интеграции для обеспечения качества наших компонентов

Composition API

Vue 3.xВажной особенностью композиции является Composition API, который используется во всем нашем исходном коде и примере кода для завершения

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

TypeScript

Весь наш исходный код предоставленTypeScript + TSXПишите, чтобы предоставить пользователям лучший опыт, мы приложили много усилий для этого

независимо от пользователяTSXили использоватьSFC(требуется сотрудничествоVue Language Featuresплагины) могут пользоваться полной подсказкой типов и защитой

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

Наша статическая копия для некоторых компонентов имеет встроенныйi18nподдержка, но в настоящее время поддерживает только китайский и английский языки

PR Добро пожаловать, мы также стремимся получить поддержку и помощь от сообщества, чтобы сделать@iduxстать более полным

Узнать большеглобализация

Глобальная конфигурация

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

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

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

Узнать большеГлобальная конфигурация

Настройка темы

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

Примечание. В настоящее время эта функция нестабильна, и мы рассматриваем возможность использованияcssзамена переменной схемыlessПеременная Дождавшись завершения решения, мы объявим поддерживаемые переменные темы в документации каждого компонента.

Больше возможностей

Адаптивная система форм

Система реактивных форм обеспечивает управляемый моделью способ обработки ввода формы, см.@angular/formsреализация

• Явная модель формы:FormGroup, FormArray, FormControl
• Состояние адаптивной формы:value, status
• Унифицированная и расширяемая проверка формы:Validators

если вы использовали@angular/forms, то вы должны чувствовать себя знакомым со следующим кодом

более контролируемые компоненты

Мы поддерживаем все компонентыv-modelизPropsОба добавляют управляемый режим, см.issue #510

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

Дизайн API на основе данных

Для некоторых сложных компонентов, например,table, tree, menu, мы рекомендуем пользователям использовать источник данных (dateSource), а не непосредственно вtemplateс помощью подкомпонентов.

В реальном процессе разработки источник данных часто является динамическим, и прямое манипулирование данными будет затруднено.templateиспользуется вv-if, v-forБолее прямой и простой в обслуживании.

- <IxMenu>
-   <template v-for="item in dataSource">
-     <IxMenuItem v-if="item.type === 'item'" :key="item.key" :icon="item.icon"></IxMenuItem>
-     <IxMenuDivider v-else-if="item.type === 'divider'" :key="item.key"></IxMenuDivider>
-   </template>
- </IxMenu>

+ <IxMenu :dataSource="dataSource"></IxMenu>

Дополнительные функции ждут вас, чтобы открыть для себя, приходите и испытайте их.

следующие шаги

В настоящее время только@iduxВ начале у него еще много несовершенств, далее мы будем улучшать его в непрерывной итерации, это наш следующий план:

• Улучшение и дополнение документации компонентов
• Визуальная оптимизация и улучшения и дополнения руководства по дизайну
• Улучшение и дополнение модульного тестирования
• Уточнение схемы переменных темы

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

Наконец, с открытым исходным кодом не так просто, надеюсь@iduxМожет получить любовь и поддержку. Мы также не будем забывать о первоначальном намерении открытого источника, активно охватить сообщество и полагаться на власть сообщества, чтобы сделать@iduxдобиться лучшего роста. Друзья, которые любят открытый исходный код, могут прийти и принять участие@iduxпроект, будь тоstar, issueвсе ещеPRСпасибо за вашу помощь и поддержку.

О IDuxFE

Мы — фронтенд-команда Sangfor Technology,@iduxОн был реализован в нескольких сценариях облачных вычислений и безопасности и в будущем обеспечит полное покрытие продукта внутри группы, поэтому не беспокойтесь о том, что мы покинем яму и откажемся от обслуживания.

Если вы заинтересованы в нас, добро пожаловать к нам, вы можете отправить свое резюме наuedc@sangfor.com.cnИли напишите мне напрямую.