目录解析:
https://pro.ant.design/docs/getting-started-cn
# 安装
npm install dva-cli -g
dva -v
dva-cli version 0.9.2
利用dva
快速创建应用: dva new dva-demo
cd dva-demo
npm start
dva 文档:
dva:
dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载等,已在生产环境广泛应用。
Ant Degisn Pro
模板中,路由统一在src/common/router.js
文件管理,所有的路由配置、组件创建均需要开发者手动创建(怀念ng-cli/vue-cli命令行工具😂 :)(: )
在 左侧菜单dashboard
下添加一个子菜单 静态测试页
步骤:
src/common/menu.js
文件,在dashboard
的children
下添加如下代码 {
name: '静态测试页',
path: 'test',
},
src/common/router.js
文件,routerConfig
对象:'/dashboard/test': {
component: dynamicWrapper(app, [], () => import ('../routes/TestPage')),
}
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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。