reactjs_ant design pro前端框架入门-向日葵屋

reactjs_ant design pro前端框架入门

红太狼 2023-06-12 06:16 137阅读 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

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0MjY2_size_16_color_FFFFFF_t_70 1

快速入门

下载地址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;