Skip to content

Latest commit

 

History

History
98 lines (78 loc) · 3.51 KB

start.md

File metadata and controls

98 lines (78 loc) · 3.51 KB
Raw

如何开始

开始之间最好先了解一下dva.js和create-react-app.

如何得到一个干净的工程结构

  1. routers目录为页面文件夹，routes下的index.js为页面配置文件，除了这个文件，其它文件都是可选的。Blank,是一个空页面示例，我们可以复制这个快速生成一个路由页面。Login，是登录页面；Register是注册页面。
  2. 留下我们需要的页面，把其它多余的文件夹删掉。
  3. 打开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',  // 默认路由
    component: UserLayout,      // 页面布局
    childRoutes: [
      Login(app),               // 子路由页面
      Register(app),
      NotFound()                // 这个要放到最下面，当所有路由当没匹配到时会进入这个页面
    ]
  }, {
    path: '/',
    title: '系统中心',
    component: BasicLayout,
    indexRoute: '/blank', // 默认路由
    childRoutes: [
      Blank(app),
      NotFound(), // 这个要放到最下面，当所有路由当没匹配到时会进入这个页面
    ]
  }
]);

export default app => createRoutes(app, routesConfig);

新建一个页面

首先在src/routes下建一个路由文件夹，形式可仿造src/routes/Blank，路由页面由四部分组成，components，model，service，index.js，

components视图页面

这部分由index.js和页面自已的样式index.less组成，下面是一个标准的空路由页面：

@connect() // dva connect
export default class extends BaseComponent {
  render() {
    return (
      <Layout className="full-layout page blank-page">
        <Content className={style.className}>空白页</Content>
      </Layout>
    );
  }
}

最外层最好使用示例中的嵌套结构，Layout > Content，并且为每一个路由页面起一个自已的className或id 如 blank-page,这样我们写这个页面特定样式的时候从这个样式开始写，不会与其它路由页面产生冲突。

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', // 页面标题
  component: dynamicWrapper(app, [import('./model')], () => import('./components')) // 如果没有 model 可以不写import('./model')
});

注册新页面到全局路由

在routers下的index.js里加入我们新写的页面即可。

配置路由到左侧菜单

在菜单的模拟数据里src/__mocks__/user.js增加我们新写的这个路由页面