dva开发一个cnode网站(1)

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 (
    

Hello, this is cnode web site

); } IndexPage.propTypes = { }; export default connect()(IndexPage);

删除routes/IndexPage.css

运行命令

npm start
修改后的首页

4.加入antd ui库

通过 npm 安装 antd 详见 repo和 babel-plugin-importbabel-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 (
    
CNODE console.log(value)} enterButton /> 首页 新手入门 API 关于 注册 登录
); }; 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 (
    

Hello, this is cnode web site

); } IndexPage.propTypes = { }; export default connect()(IndexPage);

效果:

头部

下节课接着搞。
欢迎关注我的公众号 mike啥都想搞,回复react免费领取视频教程。

你可能感兴趣的:(dva开发一个cnode网站(1))