新增页面

chenshuai2144zjylxvalleykidbran-niejljsj33xiaohuoni
上次修改时间:2021-05-07 16:18:62

这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进行简单的配置。

手动创建

新增 ts、less 文件

在 src / pages 下创建新的 js,less 文件。 如果有多个相关页面,您可以创建一个新文件夹来放置相关文件。

config
src
  models
  pages
+   NewPage.js
+   NewPage.less
  ...
...
package.json

为了更好的演示,我们初始化NewPage.js的内容如下:

export default () => {
  return <div>New Page</div>;
};

暂时不向本文档中的样式文件添加内容,您也可以尝试自己添加内容。

样式文件默认使用CSS Modules,如果需要,可以导入antd less 变量 在文件的头部:

@import '~antd/lib/style/themes/default.less';

这样可以轻松获取 antd 样式变量并在文件中使用它们,这可以保持保持页面的一致性,并有助于实现自定义主题。

新增布局

在脚手架中我们通过嵌套路由来实现布局模板。config.ts 是一个数组,其中第一级数据就是我们的布局,如果你需要新增布局可以再直接增加一个新的一级数据。

module.exports = [
   // user
   {
    path: '/user',
    component: '../layouts/UserLayout',
    routes:[...]
   },
   // app
   {
    path: '/',
    component: '../layouts/BasicLayout',
    routes:[...]
   },
   // new
   {
    path: '/new',
    component: '../layouts/new_page',
    routes:[...]
   },
]

将文件加入菜单和路由

加入菜单和路由的方式请参照 路由和菜单 - 添加路由/菜单 中的介绍完成。加好后,访问 http://localhost:8000/#/new 就可以看到新增的页面了。

新增页面

新增 model、service

布局及路由都配置好之后,回到之前新建的 NewPage.js,可以开始写业务代码了!

如果需要用到 dva 中的数据流,还需要在 src/models src/services 中建立相应的 model 和 service,具体可以参考脚手架内置页面的写法。不过我们更加推荐使用轻量数据流管理数据,并且使用 openAPI 插件来生成 serves。