reactjs_ant design pro前端框架入门

红太狼 2023-06-12 06:16 74阅读 0赞

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70][]

官网地址

[https://pro.ant.design/index-cn][https_pro.ant.design_index-cn]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1][]

**快速入门**

下载地址[https://github.com/ant-design/ant-design-pro][https_github.com_ant-design_ant-design-pro]

下载解压后目录如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2][]

开发工具导入工程完成后,初始化工程  yarn install\#安装相关依赖

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3][]

yarn start \#启动服务

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4][]

**菜单和路由**

在pro中，菜单和路由，在router.config.js配置文件中进行管理：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5][]

打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

添加路由

path: '/',
          component: '../layouts/SecurityLayout',
          routes: [
            {
              path: '/',
              component: '../layouts/BasicLayout',
              authority: ['admin', 'user'],
              routes: [
                {
                  path: '/',
                  redirect: '/welcome',
                },
                {
                  path: '/new',
                  name:'new',
                  routes:[ {
                      path: '/new/welcome1',
                      name: 'welcomea',
                      icon: 'smile',
                      component: './Welcome',
                  }, {
                      path: '/new/welcome2',
                      name: 'welcomeb',
                      icon: 'smile',
                      component: './Welcome',
                  }]
                },
                {
                  path: '/welcome',
                  name: 'welcome',
                  icon: 'smile',
                  component: './Welcome',
                },

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 6][]

ant design pro 使用的是语言国际化,需要到配置的文件中配置中文

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 7][]

添加

'menu.new':'新选项卡',
    'menu.new.welcomea':'欢迎a',
    'menu.new.welcomeb':'欢迎b',

规则如下

一级菜单

menu.name名

二级菜单

menu.一级name名.二级name名

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 8][]

新增页面

在src/pages 目录下新建一个New文件夹,用来划分代码,目录下创建NewWeclomeA.js文件

import React from 'react';
    
    class NewWeclomeA extends React.Component {
      render() {
        return (
          <div>hello a</div>
        );
      }
    }
    export default NewWeclomeA;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70]: /images/20230531/2d92f561e7fb4a44b6ff53002a7220b2.png
[https_pro.ant.design_index-cn]: https://pro.ant.design/index-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1]: /images/20230531/10fd70d7e90a413e8d514968a8198717.png
[https_github.com_ant-design_ant-design-pro]: https://github.com/ant-design/ant-design-pro
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 2]: /images/20230531/2aa36a4f6abe4bd2aeb3655cb90abe84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 3]: /images/20230531/8cab552e1ec64d1c8c51c21b7ef46ed0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 4]: /images/20230531/80572d4a06f144739c627beb87a54eb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 5]: /images/20230531/ff323d43ae4f4f5799cc92800d505ee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 6]: /images/20230531/2493cdaf7a5f417392afc22398c7ed8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 7]: /images/20230531/5829a87ac110468698a47415ea688fc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 8]: /images/20230531/0109a7e1dc60468ba81505fc9dcfec15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 9]: /images/20230531/179a8b2366aa4859847970079c924b2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 10]: /images/20230531/40aa25aafa874341946acc885dda22e4.png