Ant Design Pro框架快速上手实践

Ant Design Pro框架快速上手实践

1.前言
React 是 Facebook 公司推出的一套前端开发框架，是目前全世界最流行的前端框架。它的核心理念是将网页应用看成一个组件构成的状态机（state machine），状态的变化导致了 UI 的变化。
Ant Design 就是基于 React 实现的一套组件库。它是由蚂蚁金服体验技术部开发的，最早是在2015年发布的，到现在已经发布了三个大版本，目前一共封装了50多个组件。它在国内得到广泛使用，可能是使用量最大的 React 组件库，在国际上也有一定的知名度。
Ant Design和Ant Design Pro说的浅显一点就是组件和模板的关系，也可以这样理解Ant Design是基础库而Ant Design Pro是它的增强版，直接配套业务组件打包给你，供你使用。或者说是建材与样板房的关系，利用各种建材搭建不同风格的样板地方以供参考，开发人员可以从样板房寻找灵感，选取相应的建材组装自己的房子。

2.开发环境
首先，请安装 NodeJS。安装完成后，执行下面的命令确认是否安装成功。
node -v
npm -v
在国内，你可以安装 cnpm 获得更快速、更安全的包管理体验。使用如下命令安装：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后你可以通过如下的命令确认是否成功：
cnpm -v

3.源码下载
GitHub源码下载地址为:https://github.com/ant-design/ant-design-pro，目前公司开发使用版本为2.0.0，建议统一版本。
2.0.0版本源码地址：https://github.com/ant-design/ant-design-pro/releases/tag/2.0.0

4.目录结构
我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

5.本地开发
（1）使用vscode打开工程，进入终端，可以执行npm命令。

（2）设置镜像（公司私服），有外网条件下，为了快速下载依赖，可以设置国内其他镜像地址。
npm config set registry XXX
（3）安装依赖
npm install
一般情况下不会如此顺利，会出现报错，常见的是存在丢包问题，可以根据报错信息，补充下载缺少的依赖包。
（4）启动工程
npm start
在浏览器中打开，可以看到此时页面与官网预览页面一致。可以参照对应页面的代码学习。

6.Demo示例
开发第一个页面
参照已有的菜单，router.config.js文件中配置自定义菜单和子菜单链接路由。

在对应路径下新建Hello.js文件，输入简单内容，保存。页面会出现我们新加的菜单

如何对菜单名称国际化？添加新建菜单国际化资源。

保存后：

7.编译发布
执行npm run build命令，编译后文件会保存在根目录dist文件夹中，每个模块存储在各自文件夹中，统一部署在Web容器（公司使用Jetty）中运行。