如何開始
開始之間最好先了解一下dva.js和create-react-app.
如何得到一個干凈的工程結(jié)構(gòu)
- routers目錄為頁面文件夾，routes下的index.js為頁面配置文件荧库，除了這個文件仰猖，其它文件都是可選的作箍。Blank,是一個空頁面示例，我們可以復(fù)制這個快速生成一個路由頁面。Login汉矿，是登錄頁面愕乎；Register是注冊頁面阵苇。
- 留下我們需要的頁面，把其它多余的文件夾刪掉妆毕。
- 打開routes下的index.js慎玖，我們要在這里面配置路由頁面：
import {createRoutes} from '@/utils/core';
import BasicLayout from '@/layouts/BasicLayout';
import UserLayout from '@/layouts/UserLayout';
import NotFound from './Pages/404';
import Login from './Login';
import Register from './Register';
import Blank from './Blank';
const routesConfig = (app) => ([
{
path: '/sign', // url 地址
title: '登錄',
indexRoute: '/sign/login', // 默認(rèn)路由
component: UserLayout, // 頁面布局
childRoutes: [
Login(app), // 子路由頁面
Register(app),
NotFound() // 這個要放到最下面，當(dāng)所有路由當(dāng)沒匹配到時會進(jìn)入這個頁面
]
}, {
path: '/',
title: '系統(tǒng)中心',
component: BasicLayout,
indexRoute: '/blank', // 默認(rèn)路由
childRoutes: [
Blank(app),
NotFound(), // 這個要放到最下面笛粘，當(dāng)所有路由當(dāng)沒匹配到時會進(jìn)入這個頁面
]
}
]);
export default app => createRoutes(app, routesConfig);
新建一個頁面
首先在src/routes下建一個路由文件夾趁怔，形式可仿造src/routes/Blank，路由頁面由四部分組成薪前，components润努，model，service示括，index.js铺浇，
components視圖頁面
這部分由index.js和頁面自已的樣式index.less組成，下面是一個標(biāo)準(zhǔn)的空路由頁面：
@connect() // dva connect
export default class extends BaseComponent {
render() {
return (
<Layout className="full-layout page blank-page">
<Content className={style.className}>空白頁</Content>
</Layout>
);
}
}
最外層最好使用示例中的嵌套結(jié)構(gòu)垛膝，Layout > Content鳍侣，并且為每一個路由頁面起一個自已的className或id 如 blank-page,這樣我們寫這個頁面特定樣式的時候從這個樣式開始寫，不會與其它路由頁面產(chǎn)生沖突吼拥。
model 邏輯頁面（dva model）- 非必需
model即為dvajs的model，推薦寫法
import modelEnhance from '@/utils/modelEnhance';
export default modelEnhance({
namespace: 'blank',
});
modelEnhance為框架封裝凿可，可以簡化dvajs的寫法惑折，之后會專門介紹，如果不需要，可以完全按dvajs來編寫我們的model
service 接口定義 (dva service) - 非必需
在這里定義我們的接口API, 如沒有可以不寫
index.js 定義子路由 - 必需
const routesConfig = app => ({
path: '/blank', // url
title: 'blank page', // 頁面標(biāo)題
component: dynamicWrapper(app, [import('./model')], () => import('./components')) // 如果沒有 model 可以不寫import('./model')
});
注冊新頁面到全局路由
在routers下的index.js里加入我們新寫的頁面即可惨驶。
配置路由到左側(cè)菜單
在菜單的模擬數(shù)據(jù)里src/__mocks__/user.js增加我們新寫的這個路由頁面
