安裝dva-cli用于初始化項(xiàng)目:

npm install? -g dva-cli (前提已經(jīng)安裝過(guò)node)

創(chuàng)建項(xiàng)目目錄，并進(jìn)入該目錄

mkdir? dva-study?

cd dva-study

初始化項(xiàng)目

dva init

運(yùn)行項(xiàng)目

npm start?

項(xiàng)目初始化之后目錄結(jié)構(gòu)如下：

mock 存放用于 mock 數(shù)據(jù)的文件；

public 一般用于存放靜態(tài)文件，打包時(shí)會(huì)被直接復(fù)制到輸出目錄(./dist)；

src 文件夾用于存放項(xiàng)目源代碼；

asserts 用于存放靜態(tài)資源，打包時(shí)會(huì)經(jīng)過(guò) webpack 處理；

components 用于存放 React 組件，一般是該項(xiàng)目公用的無(wú)狀態(tài)組件；

models 用于存放模型文件

routes 用于存放需要 connect model 的路由組件；

services 用于存放服務(wù)文件，一般是網(wǎng)絡(luò)請(qǐng)求等；

utils 工具類(lèi)庫(kù)

router.js 路由文件

index.js 項(xiàng)目的入口文件

index.css 一般是共用的樣式

.editorconfig 編輯器配置文件

.eslintrc ESLint配置文件

.gitignore Git忽略文件

.roadhogrc.mock.js Mock配置文件

.webpackrc 自定義的webpack配置文件，JSON格式，如果需要 JS 格式，可修改為 .webpackrc.js

創(chuàng)建項(xiàng)目之后的步驟：

一，首先創(chuàng)建路由，路由就是組成應(yīng)用的很多個(gè)不同的頁(yè)面

1.創(chuàng)建routes文件夾，然后創(chuàng)建Products.js文件，這就是其中一個(gè)路由，即一個(gè)頁(yè)面。

2.添加路由信息到路由表，路由信息統(tǒng)一在router.js里面

二，component 即UI元素，有時(shí)候需要在多個(gè)頁(yè)面分享UI元素，或者在一個(gè)頁(yè)面使用多次。

1，新建components文件夾

2，在components文件夾下創(chuàng)建ProductList.js文件

3，使用時(shí)在需要的頁(yè)面import引入，然后再把它作為一個(gè)組件使用就可以

三，定義model,model里面是處理的數(shù)據(jù)和邏輯

里面包括同步更新的state和reducers,處理異步邏輯的effects，

訂閱數(shù)據(jù)源的subscriptions.

1.新建models文件夾，在文件夾中新建products.js文件，里面寫(xiě)相應(yīng)的數(shù)據(jù)處理和邏輯。

在products.js里面：namespace表示在全局的state上的key

state是初始值，在這里是空數(shù)組

reducers等同于redux里面的reducer，用于接收action,同步更新state

2.在models里面新建的處理數(shù)據(jù)的文件都要在index.js里面載入

// 3. Model+ app.model(require('./models/products').default);

四，連接數(shù)據(jù)處理和組件

編輯routes里面的顯示頁(yè)面，將數(shù)據(jù)傳給UI元素，再將UI元素傳給路由

五，編輯index.js文件，將要傳的數(shù)據(jù)放進(jìn)index.js里面的

const app = dva({+? initialState: {+? ? products: [+? ? ? { name: 'dva', id: 1 },+? ? ? { name: 'antd', id: 2 },+? ? ],+? },+ });