Фронтенд — это термин, который развивается. до некоторой степени.为所欲为. Но на этот раз речь идет о части front-end технологии — библиотеке компонентов.
Что такое компонент? Зачем использовать библиотеку компонентов?
Компоненты — это самые основные элементы, из которых состоит страница. Кнопки, поля ввода и раскрывающиеся списки — все это компоненты. Комбинация компонентов и компонентов становится более сложным компонентом. Что касается того, зачем использовать библиотеку компонентов, я думаю, что это должен быть опыт, пользовательский опыт и опыт разработки разработчика, взаимодействие пользователя на странице через компонент, ценный компонент может привлечь пользователей, чтобы щелкнуть с первого взгляда. , это пользовательский опыт, не говоря уже об опыте разработки.Компоненты представляют собой инкапсуляцию различных однотипных взаимодействий.Использование библиотеки компонентов позволяет нам больше сосредоточиться на развитии бизнеса и взаимодействии продуктов.
Ниже я порекомендую 5 часто используемых и популярных библиотек компонентов корпоративного уровня, выбранных из предыдущих ежемесячных журналов HelloGitHub (более 100 проектов JS).
Ant-Design
Тип: на основе библиотеки компонентов React
Официальный сайт:ant.design/index-cn
Адрес репозитория GitHub:GitHub.com/Анта-дизайн/…
Группа технического обслуживания: Технологический отдел Ant Financial Experience
ant-designЭто одна из библиотек компонентов, которые я часто использую. Ant с открытым исходным кодом, поддерживаемый Дэниелом, и с более чем 4W звездами эта библиотека компонентов стала наиболее широко используемой библиотекой компонентов React в Китае. Но душа этой библиотеки компонентов в том, что команда поддержки предложила концепцию языка дизайна, то есть все стили взаимодействия библиотеки компонентов реализованы в соответствии с этим языком дизайна, основной шрифт 14px, выравнивание категории, краткие и прямые Стиль дизайна этой библиотеки компонентов определяет великолепный пользовательский интерфейс этой библиотеки компонентов.
Уровень кода: Библиотека компонентов реализована комбинацией TS+React.Из кода видно, что команда поддержки уже поддерживала склад rc-компонентов до разработки ant-design.Можно сказать, что ant-design дальнейшая инкапсуляция rc-компонентов. С точки зрения обучения вам необходимо быть знакомым с расширенными функциями React и синтаксисом TypeScript.
Экология: экологическое окружение ant-design относительно хорошее.Сопровождающий предоставляет готовые интерфейсные/проектные решения для промежуточной стадии на основе ant-дизайна, которые включают в себя ряд бизнес-логики, необходимой для промежуточной стадии. . И фреймворк также предоставляет набор компонентов эскиза, чтобы дизайн и рисунок были согласованными.
iView
Тип: на основе библиотеки компонентов Vue.
Официальный сайт:www.iviewui.com/
Адрес репозитория GitHub:github.com/iview/iview
Команда техобслуживания: Аресн (Говорящая Дейта)
iView — это библиотека компонентов, которую я использовал при написании Vue. Можно сказать, что у меня есть некоторое понимание разработки компонентов Vue после прочтения исходного кода iView. iView — это проект библиотеки компонентов Vue, инициированный Aresn. В библиотеке компонентов теперь есть серия экосистем, охватывающих апплеты, промежуточные платформы, мобильные терминалы и готовые посевные проекты.
Уровень кода: общая файловая структура ясна, реализация компонентов тоже очень понятна, шаблон, стандартная структура скрипта Vue. Он подходит для тех, кто хочет узнать больше после понимания Vue.
Экология: iview-admin (готовое решение среднего уровня), iview-Weapp (библиотека компонентов апплета WeChat), iview Run (онлайн-редактор)
MATERIAL-UI
Тип: на основе библиотеки компонентов React
Официальный сайт:material-ui.com/
Адрес репозитория GitHub:GitHub.com/mei-org/туалет…
Команда техобслуживания: material-ui
материал-интерфейс основан на GoogleMaterial Design(Необходимо перевернуть стену) Библиотека компонентов пользовательского интерфейса React, разработанная языком дизайна. Кажется, что отечественные компании редко используют эту библиотеку компонентов.Я чувствую, что после слишком большого чтения плоского стиля, материальный стиль имеет яркое ощущение.
Команда material-ui поддерживает высокую частоту Следующее изображение — домашняя страница Github основных разработчиков material-ui
Есть в основном ежедневные коммиты, максимум 36 коммитов в день.
Уровень кода: проект содержит подробную документацию, тесты и примеры, но мне нужно дополнительно изучить конкретные детали кода 🤣
Экология: средства выбора материала и пользовательского интерфейса (средство выбора даты, времени)
ElementUI
Тип: библиотека компонентов на основе Vue
Официальный сайт:element.eleme.cn/#/zh-CN
Адрес репозитория GitHub:GitHub.com/E?Fe/Голодный…
Группа технического обслуживания: Элеме ИП
ElementUI — это библиотека компонентов для рабочего стола, разработанная Ele.me на основе Vue.В настоящее время на официальном сайте указано, что последняя версия — 2.9, а я в то время использовал версию 2.5. ElementUI также предоставляетПринципы дизайна, общий стиль дизайна библиотеки компонентов плоский, и вы можете настроить свои собственные цвета темы. Количество компонентов в основном покрывает компоненты, которые необходимы для ежедневного использования на средней стадии.
Уровень кода: структура файла понятна, определение компонентов лаконично и ясно, подходит для обучения
Экология:mint-ui (Mobile UI elements for Vue.js) element-angular(угловой вариант элемента)element-react(реактивная версия)
Taro
Тип: Мультитерминальная среда разработки
Официальный сайт:taro.aotu.io/
Адрес репозитория GitHub:github.com/NervJS/taro
Группа технического обслуживания: O2 JDC
Taro — это фреймворк для разработки span-приложений с использованием метода разработки React. Напишите один раз и запустите на нескольких терминалах, предоставляя H5, апплет и библиотеку компонентов RN. Последняя версия также очень хороша в мини-программах и опыте разработки H5 RN.
Экология: На официальном сайте представлен рынок материалов и библиотека компонентов.Если вы пишете небольшую программу, то можете порекомендовать попробовать
наконец
Добро пожаловать в общедоступную учетную запись HelloGitHub, чтобы получать больше информации и контента о проектах с открытым исходным кодом.
HelloGitHub сериализуется уже три года и получил более 10 000 ⭐
Ответьте на «Добавить группу» в фоновом режиме, чтобы обсудить технически интересные вещи вместе. Поделитесь этой статьей с друзьями 🤗