Ant Design Pro 项目搭建详细教程

更多前端知识，尽在前端潮ker社区：

前端潮咖

一.什么是ant-design-pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案，它秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

image

简而言之，antd-pro是基于ant-design UI框架搭建的完整前端脚手架。

使用antd-pro 之前，开发的同学们最好了解 ES2015+、React、UmiJS、dva、g2 、 antd以及React Router v4的基础知识，这将为你的开发工作提供必要的基础。

你的本地环境需要安装yarn（或npm）、node和 git。本章节将会使用Visual Studio Code编辑器，你需要本地安装它。

二.本地安装

方法一：git安装

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
npm install //安装依赖
npm start //运行项目

方法二：使用ant-design-pro-cli脚手架

全局安装集成化的 ant-design-pro-cli 工具，以后只需要pro new就可以直接构建这个项目了

npm install ant-design-pro-cli -g //全局安装脚手架
mkdir pro-demo && cd pro-demo //在新目录下
pro new //新建antd-pro
npm start //运行项目

哦咧哦咧，这里推荐第二种方法哦，这样你在任何时候都可以在本地构建你的antd-pro项目了哦。

开始搭建

（1）打开命令行，输入 npm install ant-design-pro-cli -g ，然后等待安装完成

image

（2）新建一个文件夹（目录）,在该文件夹里打开命令行，输入：mkdir pro-demo && cd pro-demo，该命令会新建一个名为pro-demo的文件夹，并进入该文件夹

image

（3）输入pro new 命令，将会在该目录下安装你的antd-pro项目（输入项目名称，路径默认为当前）

image

（4）输入npm start 命令

image

（5）启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了

image

三.目录结构

ant-design-pro-cli已经为我们生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json

四.添加自己的业务界面

我们看到现在的antd-pro项目是一个空的框架，相信各位宝藏前端们一定想立马看到自己的页面出现在项目中吧，让我们马上开始吧！[图片上传失败...(image-75d207-1570464480973)]

image

现在我们将使用Visual Studio Code这款友好的编辑器来重新打开我们的项目，以便进行开发工作。打开项目，控制台输入：npm start

image

等待运行完成：

image

1.新建路由

路由：目前脚手架中所有的路由都通过 config.ts 来统一管理，在 umi 的配置中我们增加了一些参数，如 name，icon，hideChildrenInMenu，authority，来辅助生成菜单。其中：

name 和 icon分别代表生成菜单项的文本和图标。

hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看分步表单的配置。

hideInMenu 可以在菜单中不展示这个路由，包括子路由。

authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。

菜单：菜单根据 config.ts 生成。如果你的项目并不需要菜单，你可以在 src/layouts/BasicLayout.tsx 中设置 menuRender={false}。

在config/config.ts(也可能是js文件，取决你选择的是TypeScript还是javaScript) 文件中添加新的路由信息:

routes: [
{
path: '/',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{ //这个就是新添加的路由，它含有一个子页面Page2
path: '/test',
name: 'test',
icon: 'bars',
routes: [{
path: '/test/page2',
name: 'MyTest',
component: './Page2',
}]
},
{
component: './404',
},
]

2. 新建页面

在pages目录下新建Page2.jsx

import React from 'react';
const MyPage = (props) => (
我的页面
);
export default MyPage;

保存看到页面出现以下内容表示成功：

image

3.编写 UI Component

随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，你可以把这部分抽成 component 。

我们来编写一个 MyTest component，准备来实现一个卡片展示页面。

新建 components/MyTest/index.js 文件：

import React, { Component } from 'react';
import { Card } from 'antd';
const { Meta } = Card;
export default class MyTest extends Component {
render() {
return (

 
  hoverable 
  style={{ width: 480, margin: 20 }} 
  cover={} 
  > 
   
   
  
 
  hoverable 
  style={{ width: 480, margin: 20 }} 
  cover={} 
  > 
   
   
  
 
  hoverable 
  style={{ width: 480, margin: 20 }} 
  cover={} 
  >