dva开发一个cnode网站（1）

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。本教程是利用cnode的开放api来做一个一样的网站，以此来学习dva框架的使用。写的不好的地方还请多多包涵，大家一起学习。1.搭建工程安装 dva-cli$ npm install dva-cli -g$ dva -vdva-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 start4.加入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.jsimport 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免费领取视频教程。