Ant Design Pro从零到一（页面创建）
修改config/routes.tx
我们在routes.tx文件中找到下面节点
在该节点下面增加代码：
{path:'/demo',name:'demo',icon: 'star',routes:[{name: '表单布局',path: './demo1',component: './demo/demo1'},{name: 'react',path: './demo2',component: './demo/demo2'}]},{name: 'test',icon: 'book',path: '/test',component: './test'}
我们来说说配置的意思把：
- path:代表访问的路径
- name:显示的名字（此处不做国际化配置）
- icon: 图标
- routes:子菜单
- component:所指向的文件
src/pages创建下文件夹与文件
这个时候访问可能会出错，那是因为你还未创建相关的文件夹和文件，这时候我们在src/pages目录下创建文件夹和文件
PS：这里采用TypeScript的形式进行创建，毕竟得跟上主流，其中
.tsx：构建界面主要文件，相当于以前的jsx（简单来说就TypeScript与XML的结合）
.less:样式文件，相当于css
随便写点内容
这时候访问好像还是不是那么顺畅，所以我们就写点内容，找到demo下面的demo1、demo2和test文件夹，在index.tsx中开始写
import React from "react";
class Index extends React.Component {render() {return <div>我的第一个AntD</div>}
}export default Index;
然后你就会看到这样：
接下来改进一下
import React from "react";
class Index extends React.Component {render() {return <div><PageContainer><Card>测试213</Card></PageContainer></div>}
}export default Index;
然后我们这个时候需要做什么呢？
既然第一个页面出来了，那我们就要开始学者用一用Ant Design中的组件嘛，不然有啥子用
点击进入 Ant Design - 一套企业级 UI 设计语言和 React 组件库 选择组件
这时候我们来点简单的表格渲染把
然后复制所有代码，并作出以下修改
因为之前看React我们知道这是对应的渲染到到mountNode节点下，所以我们直接用Table标签就好，改为下面的这样
完整的index.tsx代码：
import React from "react";
import {PageContainer} from "@ant-design/pro-layout";
import {Card} from "antd";import { Table, Tag, Space } from 'antd';const columns = [{title: 'Name',dataIndex: 'name',key: 'name',render: text => <a>{text}</a>,},{title: 'Age',dataIndex: 'age',key: 'age',},{title: 'Address',dataIndex: 'address',key: 'address',},{title: 'Tags',key: 'tags',dataIndex: 'tags',render: tags => (<>{tags.map(tag => {let color = tag.length > 5 ? 'geekblue' : 'green';if (tag === 'loser') {color = 'volcano';}return (<Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>);})}</>),},{title: 'Action',key: 'action',render: (text, record) => (<Space size="middle"><a>Invite {record.name}</a><a>Delete</a></Space>),},
];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',tags: ['nice', 'developer'],},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',tags: ['loser'],},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',tags: ['cool', 'teacher'],},
];class Index extends React.Component {render() {return <div><PageContainer><Card><Table columns={columns} dataSource={data} /></Card></PageContainer></div>}
}export default Index;
结束
到这里页面构建结束，是不是基本已经能够创建界面了，然后继续看下一篇
相关链接
上一篇：
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ... 一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由 数据流管理)的组合 ... Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ... 通过实际demo演示一个管理后台的开发过程 知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表 其中 menuD ... 一.概述 以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ... 用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ... 前提:用ant design pro新增注册页,没有显示在菜单,在项目Page文件夹删除 原因:配置路由没有删 总结: 手动删除页面需要删1.Page目录下的页面文件 2.src/Page/.umi/ ... 未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ... 一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ... 一.概述 1.1.脚手架概念 编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...Ant Design Pro从零到一（页面创建）相关推荐
最新文章
热门文章