antd pro 使用小结

前序准备

你的本地环境需要安装 node 和 git。技术栈基于 ES2015+、React、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

Ant Design Pro 脚手架内用到的组件分为两种:

antd 组件：https://ant.design/docs/react/introduce-cn

pro 自带组件：https://github.com/ant-design/ant-design-pro/tree/master/src/components

安装

运行命令：

git clone https://gitlab.stnts.com/st-jinrong/st_react_admin.git

npm i

npm start 如果对git命令不太熟悉 可以用svn工具

布局

ant design目前提供了两套布局 layout 和 grid

grid：栅格组件

特点：按照一定的比例划分页面

随着屏幕的变化依旧保持比例

具有弹性布局的特点

layout组件：

页面框架级别的布局设计 针对于框架布局结构

路由的配置

路由信息的配置 在src/common/router.js 中

菜单的配置

菜单信息的配置 在src/common/menu.js 中

隐藏菜单栏

如果需要隐藏某条菜单栏 可以在该条数据中增加hideInMenu参数

隐藏面包屑

如果需要隐藏面包屑中的某个层级，可以使用hideInBreadcrumb

权限管理

控制菜单显示

设置authority属性 配置该项菜单的准入权限

控制路由导向

菜单栏中配置的权限会自动同步到对应的路由中，如果router.js中有不同的配置，路由控制以router.js为准

跃跃欲试 新增页面

脚手架中提供了两种布局模板：

基础布局： BasicLayout

账户相关布局： UserLayout

为了规范统一 新建的文件需要首字母大写 文件夹也如此

样式

项目中采用的是less

less用起来也很简单

全局样式的定义

渲染出来的class名称带了一个hash值 保证了它的唯一性

css module只对className和id进行转换 

属性选择器和标签选择器都不进行处理

推荐使用className

新增 model和service

router.js 中 引入list的model

BasicList组建中 通过connect连接model

这个组建就可以通过this.props拿到model中list.js中定义state的数据了

model 中的list.js

从mock直接切换到服务器端请求

在本地运行npm start的时候

接口请求会调用本地的mock数据

如果在开发过程中 

需要用到指定服务器端的接口

则需要如下配置

关闭mock npm start:no-proxy

重定向

引入外部模块

根据业务需求 有时还需要映入其他外部的模块 比如映入富文本组件react-quill

引入依赖

在终端输入命令安装

npmireact-quill --save

加上--save参数会自动添加到package.json中

使用

构建和发布

构建

项目开发完成 只需要运行一行命令 就可以打包项目了

npmrun build

代码分割

disableDynamicImport: false设置成fals

打包的时候 会把一个大的js文件分割成多个js

对应页面加载对应的js文件

环境变量

需要区分开发 部署 和测试环境的时候 可以通过 .webpackrc 中设置 env 环境变量来实现

配置主题

theme:'@primary-color':'#10e99b',,

生成API文档

运行如下命令 在dist文件下面 就会生成api文件