共计 2503 个字符，预计需要花费 7 分钟才能阅读完成。
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
本教程是利用 cnode 的开放 api 来做一个一样的网站，以此来学习 dva 框架的使用。写的不好的地方还请多多包涵，大家一起学习。
1. 搭建工程
安装 dva-cli
$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1
创建新应用
$ dva new cnode
然后我们 cd 进入 cnode 目录，并启动开发服务器：
$ cd cnode
$ npm start
几秒钟后，你会看到以下输出：
Compiled successfully!
The app is running at:
http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.
这样我们的 cnode 的应用就创建好了
2. 了解目录
mock 产生假数据
node_modules 项目依赖的第三方库
public 放单页面模板文件，相当于访问的首页面
src 开发目录
src/assets 静态资源文件
src/components 公共组件
src/models 每个业务中处理的数据（state）
src/routes 路由对应的页面
src/services 业务逻辑处理
utils 工具类
3. 修改首页
现在我们要换掉欢迎页，去做我们自己的布局
打开 routes/IndexPage.js 修改代码
import React from ‘react’;
import {connect} from ‘dva’;
function IndexPage() {
return (
<div >
<h1>Hello, this is cnode web site</h1>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
删除 routes/IndexPage.css
运行命令
npm start
4. 加入 antd ui 库
通过 npm 安装 antd 详见 repo 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见 repo
$ npm install antd babel-plugin-import –save
编辑 .webpackrc，使 babel-plugin-import 插件生效。
{
“extraBabelPlugins”: [
[“import”, { “libraryName”: “antd”, “libraryDirectory”: “es”, “style”: “css”}]
]
}
5. 使用 antd 创建头部公共组件
在 components 下创建 Header.js
import React from ‘react’;
import {Menu, Icon, Input} from ‘antd’;
import PropTypes from ‘prop-types’;
const Search = Input.Search;
const Header = ({dispatch,keys}) => {
function handleClick(e) {
console.log(e.key)
}
return (
<div>
<Menu
onClick={handleClick}
selectedKeys={keys}
mode=”horizontal”
>
<Menu.Item key=”node” disabled>
<Icon type=”tag” />CNODE
</Menu.Item>
<Menu.Item key=”search”>
<Search
placeholder=”input search text”
onSearch={value => console.log(value)}
enterButton
/>
</Menu.Item>
<Menu.Item key=”index”>
<a href=”/”><Icon type=”appstore” /> 首页 </a>
</Menu.Item>
<Menu.Item key=”into”>
<a href=”#/into”><Icon type=”appstore” /> 新手入门 </a>
</Menu.Item>
<Menu.Item key=”api”>
<a href=”#/api”><Icon type=”appstore” />API</a>
</Menu.Item>
<Menu.Item key=”about”>
<a href=”#/about”><Icon type=”appstore” /> 关于 </a>
</Menu.Item>
<Menu.Item key=”reg”>
<a href=”#/reg”><Icon type=”appstore” /> 注册 </a>
</Menu.Item>
<Menu.Item key=”login”>
<a href=”#/login”><Icon type=”appstore” /> 登录 </a>
</Menu.Item>
</Menu>
</div>
);
};
Header.propTypes = {
keys: PropTypes.array.isRequired
};
export default Header;
在 routes/IndexPage.js 中使用公共组件
import React from ‘react’;
import {connect} from ‘dva’;
import Header from ‘../components/Header’;
function IndexPage() {
return (
<div >
<Header keys={[‘index’]}/>
<h1>Hello, this is cnode web site</h1>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
效果: 下节课接着搞。欢迎关注我的公众号 mike 啥都想搞，回复 react 免费领取视频教程。
