antd state使用_antd pro 使用小结

前序准备

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

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

运行命令：

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文件