antd是按照规范设计出的一套组件库,蚂蚁金服、美团外面等热门app都在使用,dva是一个基于 react 和 redux 的轻量应用框架,我按照教程尝试创建一个应用,这里面的教程很棒,大家只要按照它的讲解一步步操作肯定会看到效果,我在这就不赘述教程内容了,我在学习过程中遇到了点问题,在这里总结一下,希望对大家有所帮助:
1、样式不见了
当我按照教程走完所有操作,我以为我看见的会是这样的:
但是没想到却是这样的:
原来,我编辑.roadhogrc文件,引入antd样式时忽略了env的环境变量,只在production中配置了样式,而我现在在开发模式下,development也应该配置上,.roadhogrc说明点这里
我项目中的配置文件:
修改完之后,自动刷新页面,样式有了
2、自定义样式不生效
我在routes目录新建css文件,用import引入,在页面中使用样式
按照以前的习惯,我在css中定义变量名包含中划线的类名,在前端用styles.xyy-aichifan使用的时候,控制台报错,原来jsx语法不能识别我带中划线的变量,改成下划线就好了。
之后我照猫画虎自己写了个route,component,model,然而我初始化在index.js里的state数据并没有生效,原来忽略了在index.js中添加这一行:app.model(require('./models/users'));
折腾一番之后,总结了使用dva开发前端项目要走的基本流程,如果要开发更复杂酷炫的应用,在这上面继续扩展。
1、在routes文件夹新建个路由,其实我一直觉得“路由”这个词很别扭,用“容器组件”更恰当一些。
2、在components文件夹定义UI组件,容器组件就是靠这些UI组件组合起来的。
3、在models文件夹定义model文件,model文件负责管理一个容器组件的模型,包含同步更新 state 的 reducers,处理异步逻辑(主要是ajax请求)的 effects。
4、最后,在容器组件中,把model和component串联起来,以antd官方的demo为例:
第1个products,connect后面的那个:表示models里products.js里的命名空间“products”
第2个products:表示的state里面的products
第3个products:表示容器组件的定义的products