安装dva-cli用于初始化项目:
npm install -g dva-cli (前提已经安装过node)
创建项目目录,并进入该目录
mkdir dva-study
cd dva-study
初始化项目
dva init
运行项目
npm start
项目初始化之后目录结构如下:
mock 存放用于 mock 数据的文件;
public 一般用于存放静态文件,打包时会被直接复制到输出目录(./dist);
src 文件夹用于存放项目源代码;
asserts 用于存放静态资源,打包时会经过 webpack 处理;
components 用于存放 React 组件,一般是该项目公用的无状态组件;
models 用于存放模型文件
routes 用于存放需要 connect model 的路由组件;
services 用于存放服务文件,一般是网络请求等;
utils 工具类库
router.js 路由文件
index.js 项目的入口文件
index.css 一般是共用的样式
.editorconfig 编辑器配置文件
.eslintrc ESLint配置文件
.gitignore Git忽略文件
.roadhogrc.mock.js Mock配置文件
.webpackrc 自定义的webpack配置文件,JSON格式,如果需要 JS 格式,可修改为 .webpackrc.js
创建项目之后的步骤:
一,首先创建路由,路由就是组成应用的很多个不同的页面
1.创建routes文件夹,然后创建Products.js文件,这就是其中一个路由,即一个页面。
2.添加路由信息到路由表,路由信息统一在router.js里面
二,component 即UI元素,有时候需要在多个页面分享UI元素,或者在一个页面使用多次。
1,新建components文件夹
2,在components文件夹下创建ProductList.js文件
3,使用时在需要的页面import引入,然后再把它作为一个组件使用就可以
三,定义model,model里面是处理的数据和逻辑
里面包括同步更新的state和reducers,处理异步逻辑的effects,
订阅数据源的subscriptions.
1.新建models文件夹,在文件夹中新建products.js文件,里面写相应的数据处理和逻辑。
在products.js里面:namespace表示在全局的state上的key
state是初始值,在这里是空数组
reducers等同于redux里面的reducer,用于接收action,同步更新state
2.在models里面新建的处理数据的文件都要在index.js里面载入
// 3. Model+ app.model(require('./models/products').default);
四,连接数据处理和组件
编辑routes里面的显示页面,将数据传给UI元素,再将UI元素传给路由
五,编辑index.js文件,将要传的数据放进index.js里面的
const app = dva({+ initialState: {+ products: [+ { name: 'dva', id: 1 },+ { name: 'antd', id: 2 },+ ],+ },+ });