ant design4.0官网

ant-design-pro 官网文档
Hooks 可以不用类了
proTable 表格更加方便

环境：python2.7、umi3.0、antdesign4.0、ant-design-pro4.0

基础

初始化

在python2.7环境下，科学上网，初始化。

  1. yarn global add puppeteer # 先本地安装一下

image.png

启动：

  1. yarn
  2. yarn start
  • 错误1：python版本不对，有可能用到python，切换到python2
  • 错误2：MSBUILD : error MSB3428，解决：shellpower管理员运行
  1. npm install -g node-gyp
  2. npm install -global -production windows-build-tools
  • 错误3：puppeteer失败，建议开代理吧，或者设置镜像
  1. npm/yarn config set puppeteer_download_host=https://npm.taobao.org/mirrors

目录结构

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

  1. ├── config                   # umi 配置，包含路由，构建等配置
  2. ├── mock                     # 本地模拟数据
  3. ├── public
  4. │   └── favicon.png          # Favicon
  5. ├── src
  6. │   ├── assets               # 本地静态资源
  7. │   ├── components           # 业务通用组件
  8. │   ├── e2e                  # 集成测试用例
  9. │   ├── layouts              # 通用布局
  10. │   ├── models               # 全局 dva model
  11. │   ├── pages                # 业务页面入口和常用模板
  12. │   ├── services             # 后台接口服务
  13. │   ├── utils                # 工具库
  14. │   ├── locales              # 国际化资源
  15. │   ├── global.less          # 全局样式
  16. │   └── global.ts            # 全局 JS
  17. ├── tests                    # 测试工具
  18. ├── README.md
  19. └── package.json

常用配置

修改url类型

  1. history: { type: 'hash' }, // 默认是 browser（不能刷新）

单页面示例：ModelList.zip

问题

刷新页面404

修改history模式为 hash即可。

image.png

自定义样式

先定义

  1. /* styles.css */
  2. .hello {
  3.   font-size: 32px;
  4.   font-weight: bold;
  5.   color: #30b767; /* 绿色 */
  6. }

再使用

  1. import myStyles from './styles.css';
  2. export default () => {
  3.   return (
  4.     <div className={myStyles.hello}>Hello World</div>
  5.   );
  6. };

覆盖antd样式

  1. <!-- 在 css/less 文件中定义覆盖 -->
  2. .override-ant-btn .ant-btn {
  3.     border-radius: 16px;
  4. }
  6. <!-- 在 html 中使用对应的 class 名称 -->
  7. <span className={styles['override-ant-btn']}>
  8.   <Button>加入圆角的按钮</Button>
  9. </span>