漂亮的实力派 Ant Design Pro 2.0 正式发布

1.0 发布以后，Ant Design Pro 受到了业界普遍关注和使用，GitHub 上 star 数一路增加到 11,686 个，在蚂蚁金服内部也落地数百个中后台应用。

在这 8 个月内，2.0 研发计划也在持续进行中，在给 V2 版本发起过 PR 的 38 位贡献者帮助下，经历了 600 个 commit，一次总体架构升级后，咱们带来了全新的 Ant Design Pro 2.0。在这个版本中咱们带来了四个全新的页面、多种布局方式来丰富 pro 的使用场景、脚手架从 roadhog 切换到了 umi2，而且加入了一个炫酷的设置抽屉。预览界面参见 preview.pro.ant.design 。

😘 全新的页面

做为西湖区最具影响力 web 设计规范，优雅美观，精心设计的界面一直是咱们主打优点。V2 中咱们也带来了一系列界面更新与优化，引入四个新的界面：

• 分步对话框
• 信息录入对话框
• 我的中心
• 我的设置

🎨 新布局和主题

在 V2 中咱们内置了多种布局方式，你能够经过简单配置组合出多种多样的界面来知足需求，总有一款适合你。为了方便你们更快看到效果，咱们开发了一个炫酷的设置抽屉来进行主题和布局切换。确认效果后你能够拷贝设置，而且将其设置为默认，换主题 so easy，更重要的是全程都是在线，无需重启脚手架，立等可见。

⚡ 脚手架切换到 umi

umi 中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各类进阶的路由功能，并以此进行功能扩展，好比支持路由级的按需加载。而后配以完善的插件体系，覆盖从源码到构建产物的每一个生命周期，支持各类功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。

umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了数百个应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。它已经很好地服务了咱们的内部用户，同时但愿它也能服务好外部用户。 它包含如下特性：

• 📦 开箱即用，内置 react、react-router 等
• 🏈 类 next.js 且功能完备的路由约定，同时支持配置的路由方式
• 🎉 完善的插件体系，覆盖从源码到构建产物的每一个生命周期
• 🚀 高性能，经过插件支持 PWA、以路由为单元的 code splitting 等
• 💈 支持静态页面导出，适配各类环境，好比中台业务、无线业务、egg、支付宝钱包、云凤蝶等
• 🚄 开发启动快，支持一键开启 dll 和 hard-source-webpack-plugin 等
• 🐠 一键兼容到 IE9，基于 umi-plugin-polyfills
• 🍁 完善的 TypeScript 支持，包括 d.ts 定义和 umi test
• 🌴 与 dva 数据流的深刻融合，支持 duck directory、model 的自动加载、code splitting 等等
• 🐱‍ 支持组件按需加载

在 pro 中咱们提供了一些封装更加高级的组件，在 V2 中咱们还提供了按需加载功能，只要在 babel-plugin-import 作以下配置：

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    style: true,
    camel2DashComponentName: false,
  }
复制代码

就能够像 antd 同样使用 pro 组件，咱们强烈推荐这种方式，能够显著减小包大小。

import { Result } from 'ant-design-pro';
ReactDOM.render(<Result type="success" />, mountNode); 复制代码

🌏 国际化最佳实践

V2 中提供了基于 umi-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> } 复制代码

🥇 展望将来

在将来咱们将持续关注 pro 的性能和易用性。并会和 umi 一块儿在组件物料化方面作一些探索，持续完善文档，下降你们使用成本。更加好看和好用会是咱们一直的努力方向。

🤝 特别鸣谢

感谢全部提交错误、发起PR、回复问题、编写文档等的人！特别感谢如下几位社区小伙伴 @yoyo837 @xiaohuoni @zhangxiuling @kaoding ，以及为 V2 发起过 PR 的 38 位贡献者，大家的参与让 pro V2 的发布成为现实。

若是你在使用 Ant Design Pro 时遇到任何问题，可随时在 GitHub 提交问题。

感谢你的阅读，敬请安装、尝试。 🎉

原文连接