Ant Desing Pro2.0(二)新增页面

喜欢ヅ旅行 2022-03-09 08:15 300阅读 0赞

1.参考资料

1.  参考[ant design pro][]
2.  参考[DvaJs][]

2.目录地址

1.  [Ant Desing Pro2.0(一)项目初始化][Ant Desing Pro2.0]
2.  [Ant Desing Pro2.0(二)新增页面][Ant Desing Pro2.0 1]
3.  [Ant Desing Pro2.0(三)设置代理][Ant Desing Pro2.0 2]
4.  [Ant Desing Pro2.0(四)与服务端交互][Ant Desing Pro2.0 3]

--------------------

# 1.新增页面 #

1.1 在src->pages->『新建文件夹』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less

![clipboard.png][]

1.2填入如下代码

--------------------

// 这是NewPage.js内容
    import React, { PureComponent } from "react";
    //面包屑
    import PageHeaderWrapper from "@/components/PageHeaderWrapper";
    // 引入less
    import styles from "./NewPage.less";
    
    class NewPage extends PureComponent {
      render() {
        return (
          <PageHeaderWrapper>
            <div>
              HELLO WORD!
            </div>
          </PageHeaderWrapper>
        );
      }
    }
    
    export default NewPage;

--------------------

## ![clipboard.png][clipboard.png 1] ##

// 这是NewPage.less内容
    //样式文件默认使用 CSS Modules，如果需要，你可以在样式文件的头部引入 antd 样式变量文件：
    //这样可以很方便地获取 antd 样式变量并在你的文件里使用，有利于保持页面的一致性，也方便实现定制主题。
    @import "~antd/lib/style/themes/default.less";

--------------------

# 2.配置路由 #

2.1 在config->router.config.js->『47行新增如下内容』

--------------------

// 这行是新增的内容
      {
        path: "/newPage",
        icon: "file",
        name: "newPage",
        routes: [
          {
            path: "/newPage/newPage",
            name: "newPage",
            component: "./NewPage/NewPage"
          }
        ],
      },
      ![clipboard.png](/img/bVbppqB)

![clipboard.png][clipboard.png 2]

2.2 做完如上步骤其实功能是完成了，但是pro 2.x版本中加入了菜单国际化中。所以你刚刚的页面如下

![clipboard.png][clipboard.png 3]

这不是我们想要的效果，让我在进行修改修改
    在src->locales->zh-CN->menu.js->『11行新增如下内容』

--------------------

'menu.newPage': '新增菜单',
    'menu.newPage.newPage': '新增页面',

--------------------

![clipboard.png][clipboard.png 4]

# 3.查看效果 #

3.1运行效果

![clipboard.png][clipboard.png 5]

3.2让我做一道连线题把

![clipboard.png][clipboard.png 6]

[ant design pro]: https://pro.ant.design/docs/new-page-cn
[DvaJs]: https://dvajs.com/guide/introduce-class.html#react-%E6%B2%A1%E6%9C%89%E8%A7%A3%E5%86%B3%E7%9A%84%E9%97%AE%E9%A2%98
[Ant Desing Pro2.0]: https://segmentfault.com/a/1190000018407336
[Ant Desing Pro2.0 1]: https://segmentfault.com/a/1190000018409352
[Ant Desing Pro2.0 2]: https://segmentfault.com/a/1190000018412076
[Ant Desing Pro2.0 3]: https://segmentfault.com/a/1190000018422882
[clipboard.png]: /images/20220309/768e57bbf7934aa2904a5af330c79fe6.png
[clipboard.png 1]: /images/20220309/3a24aa7383044584be058b6ba33e9837.png
[clipboard.png 2]: /images/20220309/1bb40ffcae5646d5b99f0826b31672d8.png
[clipboard.png 3]: /images/20220309/1f733a85fd1840988fd1e37d9dec5630.png
[clipboard.png 4]: /images/20220309/caf68e4921514169a5e2db8cb6d57af9.png
[clipboard.png 5]: /images/20220309/d1f5ce974e4941f7b63ad39a1ecfa031.png
[clipboard.png 6]: /images/20220309/f22924de5f15411e9ef8e1fc39f67cbd.png