React技术栈-React UI之ant-design使用入门
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.最流行的开源React UI组件库
1>.material-ui(国外)
官网地址: http://www.material-ui.com/#/ github地址: https://github.com/callemall/material-ui
2>.ant-design(国内蚂蚁金服)
PC官网: https://ant.design/index-cn 移动官网: https://mobile.ant.design/index-cn Github: https://github.com/ant-design/ant-design/ Github: https://github.com/ant-design/ant-design-mobile/
二.ant-design-mobile使用入门
1>.使用create-react-app创建react应用
C:\Users\yinzhengjie\WebstormProjects\myweb>npm install create-react-app -g C:\Users\yinzhengjie\AppData\Roaming\npm\create-react-app -> C:\Users\yinzhengjie\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@3.3.0 updated 1 package in 9.527s C:\Users\yinzhengjie\WebstormProjects\myweb> C:\Users\yinzhengjie\WebstormProjects\myweb>create-react-app antd-mobile-demo
2>.搭建antd-mobile的基本开发环境（参考链接:https://mobile.ant.design/docs/react/introduce-cn）
C:\Users\yinzhengjie\WebstormProjects\myweb> npm install antd-mobile --save
3>.修改"index.html"的配置文件讲'name=“viewport" '标签对应的content的值末尾追加"user-scalable=no"，与此同时再加一段js代码解决移动端触摸屏带有的300ms延迟问题，如下图所示。
4>.下载依赖包实现按需加载/打包组件(js/css)
C:\Users\yinzhengjie\WebstormProjects\myweb\antd-mobile-demo>npm install react-app-rewired babel-plugin-import --save-dev
5>.创建"config-overrides.js"文件,内容如下图所示，目的就是为原有的配置文件注入按需打包插件的功能。(详细说在官方文档有说明:"https://ant.design/docs/react/introduce-cn")
const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}], config);
return config;
};