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
特点：按照一定的比例划分页面
随着屏幕的变化依旧保持比例
具有弹性布局的特点
页面框架级别的布局设计 针对于框架布局结构
路由信息的配置 在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
router.js 中 引入list的model
BasicList组建中 通过connect连接model
这个组建就可以通过this.props拿到model中list.js中定义state的数据了
model 中的list.js
在本地运行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',,
运行如下命令 在dist文件下面 就会生成api文件
