1 Star 0 Fork 0

lomo / antPro

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
.ga
Loading...
README
MIT

Ant Design Pro Notes (React)

https://pro.ant.design/

目录解析:

https://pro.ant.design/docs/getting-started-cn

dva

# 安装
npm install dva-cli -g
dva -v
dva-cli version 0.9.2

利用dva快速创建应用: dva new dva-demo

cd dva-demo

npm start

dva 文档:

https://dvajs.com/

dva:

dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载等,已在生产环境广泛应用。

添加自定义菜单/路由

Ant Degisn Pro模板中,路由统一在src/common/router.js 文件管理,所有的路由配置、组件创建均需要开发者手动创建(怀念ng-cli/vue-cli命令行工具😂 :)(: )

添加简单菜单

在 左侧菜单dashboard下添加一个子菜单 静态测试页

步骤:

  1. 修改src/common/menu.js文件,在dashboardchildren下添加如下代码
 {
      name: '静态测试页',
      path: 'test',
  },
  1. 修改src/common/router.js文件,routerConfig对象:
'/dashboard/test': {
      component: dynamicWrapper(app, [], () => import ('../routes/TestPage')),
    }
  1. 创建路由对应的页面,在src/routes/文件夹下创建 TestPage.js
import React, { PureComponent } from 'react';

export default class Workplace extends PureComponent {

    render() {
        return (
          <div>
            <h1> Hello ! 这是一个静态测试页面 </h1>
            <h3>略略略</h3>
            <span>用来测试antd pro左侧Menu如何自定义配置~ </span>
          </div>
        );
        }
    }

保存后,不用重新 npm start, 之前启动的进程会自动重新build 并启动刷新浏览器(使用的是HMR)。

添加一个复杂的组件化的菜单

参考: https://www.missshi.cn/api/view/blog/5ab755dd22890966e2000003

其他参考

十二步 完成用户CRUD 应用: https://github.com/dvajs/dva/tree/master/examples/user-dashboard https://github.com/sorrycc/blog/issues/18

https://blog.csdn.net/konglongaa/article/details/79131283

MIT License Copyright (c) 2018 Alipay.inc Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

react study by using ant pro (https://pro.ant.design/) expand collapse
JavaScript
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/lomospace/antPro.git
git@gitee.com:lomospace/antPro.git
lomospace
antPro
antPro
master

Search