В течение этих 8 месяцев план исследований и разработок версии 2.0 также находится в процессе выполнения. С помощью 38 участников, которые инициировали PR для версии V2, мы выполнили 600 коммитов. После общего обновления архитектуры мы представили совершенно новый дизайн Ant. Про 2.0. В этой версии мы добавили четыре новые страницы, различные методы компоновки, чтобы обогатить сценарии использования pro, леса были переключены с roadhog на umi2, а также был добавлен классный ящик настроек. Интерфейс предварительного просмотра см.preview.pro.ant.design.
😘 Совершенно новая страница
Как самая влиятельная спецификация веб-дизайна в Вест-Лейк-Дистрикт, элегантный и красивый, хорошо продуманный интерфейс всегда был нашим главным преимуществом. В V2 мы также внесли ряд обновлений и оптимизаций интерфейса, представив четыре новых интерфейса:
- пошаговый диалог
- диалог ввода информации
- персональный центр
- Персональные настройки
🎨 Новые макеты и темы
В версии 2 мы предусмотрели множество методов компоновки, вы можете комбинировать различные интерфейсы с помощью простой конфигурации в соответствии с вашими потребностями, всегда найдется подходящий для вас. Чтобы всем было проще увидеть эффект быстрее, мы разработали крутую панель настроек для переключения тем и макетов. После подтверждения эффекта вы можете скопировать настройки и установить их по умолчанию, изменить тему так просто, и что более важно, весь процесс находится в режиме онлайн, нет необходимости перезапускать скаффолдинг, и вы можете сразу его увидеть.
⚡ Леса переключаются на уми
umiПроизносится как «Уми» на китайском языке. Это подключаемая среда приложения для реагирования на уровне предприятия. umi основан на маршрутизации и поддерживает класс next.jsконвенционная маршрутизация, и различные расширенные функции маршрутизации, а также соответствующим образом расширить функции, такие как поддержка уровня маршрутизациинагрузка по требованию. Затем он оснащен полной системой подключаемых модулей, охватывающей каждый жизненный цикл от исходного кода до создания продуктов, поддерживающей различные функциональные расширения и потребности бизнеса.В настоящее время существует более 50 подключаемых модулей, объединенных внутри и снаружи.
umi — это базовая интерфейсная структура Ant Financial, которая прямо или косвенно обслуживала сотни приложений, включая Java, Node, беспроводные сети H5, автономные (гибридные) приложения, чистые интерфейсные приложения активов, приложения CMS и т. д. Он хорошо послужил нашим внутренним пользователям и, надеюсь, также хорошо послужит внешним пользователям. Он содержит следующие функции:
- 📦 Из коробки встроенный реакт, реакт-роутер и т.д.
- 🏈 class next.js и полнофункциональныйсоглашение о маршрутизации, поддерживая настроенный режим маршрутизации
- 🎉 Полная система плагинов, охватывающая каждый жизненный цикл от исходного кода до создания продукта.
- 🚀 Высокая производительность, поддержка PWA через плагины, разделение кода с маршрутизацией как единое целое и т. д.
- 💈 Поддержка экспорта статических страниц, адаптация к различным средам, таким как средний офис, беспроводной бизнес,egg, кошелек Alipay, Yunfengdie и т. д.
- 🚄 Быстрый старт разработки, поддержка запуска в один кликdllа такжеhard-source-webpack-pluginЖдать
- 🐠 Совместимость в один клик с IE9 на основеumi-plugin-polyfills
- 🍁 Полная поддержка TypeScript, включая определения d.ts и тест umi
- 🌴 Глубокая интеграция с потоком данных dva, поддержка каталога уток, автоматическая загрузка модели, разделение кода и т. д.
- 🐱 Поддержка загрузки компонентов по запросу
В версии Pro мы предоставляем несколько более продвинутых компонентов инкапсуляции, а в V2 мы также предоставляем функцию загрузки по запросу, если в babel-plugin-import выполняется следующая конфигурация:
{
libraryName: 'ant-design-pro',
libraryDirectory: 'lib',
style: true,
camel2DashComponentName: false,
}
Вы можете использовать профессиональные компоненты, такие как antd, которые мы настоятельно рекомендуем и которые могут значительно уменьшить размер пакета.
import { Result } from 'ant-design-pro';
ReactDOM.render(<Result type="success" />, mountNode);
🌏 Лучшие практики интернационализации
На основе версии 2umi-plugin-localeлучшие практики интернационализации, простоsrc/localesВведите соответствующие js, например,en-US.jsа такжеzh-CN.js, и тогда мы сможем с радостью использовать возможности, связанные с интернационализацией, в нашем коде.
import {
formatMessage,
setLocale,
getLocale,
FormattedMessage,
} from 'umi/locale';
export default () => {
return <div><FormattedMessage id="test" /></div>
}
🥇Глядя в будущее
В будущем мы продолжим фокусироваться на производительности и простоте использования профи. И вместе с umi мы проведем некоторые исследования в области материализации компонентов, продолжим улучшать документацию и снижать стоимость использования. Более красивым и простым в использовании будет наше постоянное направление.
🤝 Отдельное спасибо
Спасибо всем, кто сообщал об ошибках, делал PR, отвечал на вопросы, писал документацию и многое другое! Особая благодарность следующим партнерам по сообществу@yoyo837 @xiaohuoni @zhangxiuling @kaoding, и 38 участников, инициировавших PR для V2, ваше участие сделало выпуск Pro V2 реальностью.
Если у вас возникнут какие-либо проблемы с Ant Design Pro, не стесняйтесь размещать сообщения на GitHub.Отправить вопрос.
Спасибо за прочтение, пожалуйста, установите и попробуйте. 🎉