reactjs_ant design pro前端框架入門

Ant Design Pro 是基於Ant Design的一個開箱即用的，企業級中後臺前端/設計解決方案。

 

官網地址

https://pro.ant.design/index-cn

 

快速入門

下載地址https://github.com/ant-design/ant-design-pro

 

下載解壓後目錄如下

 

開發工具導入工程完成後,初始化工程  yarn install#安裝相關依賴

 

yarn start #啓動服務

 效果如下

 

菜單和路由

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

打開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',
            },

 

效果如下

 

ant design pro 使用的是語言國際化,需要到配置的文件中配置中文

 

 

添加 

'menu.new':'新選項卡',
'menu.new.welcomea':'歡迎a',
'menu.new.welcomeb':'歡迎b',

規則如下

一級菜單

menu.name名

二級菜單

menu.一級name名.二級name名

效果圖如下

 

新增頁面

在src/pages 目錄下新建一個New文件夾,用來劃分代碼,目錄下創建NewWeclomeA.js文件

import React from 'react';

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