文档

官网地址
官网使用文档

正文

1. 安装 & 使用

1. 安装
   官网文档参考地址 - 安装

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project

2. 使用
   官网文档参考地址 - 本地开发
   官网文档参考地址 - 构建
   官网文档参考地址 - 分析构建文件体积

# 安装依赖
npm install
# or
yarn

# 本地启动
npm start

# 构建 (dist)
npm run build

# 分析构建文件体积
npm run analyze

2. 新增页面(这里以新建 Home 页面为例)

参考地址

1. 首先在 src/pages/ 目录下新建一个 Home 文件夹，再在文件夹中新建两个文件 Index.js 和 Index.less

新建文件截图

2. 之后在 config/router.config.js 路由配置文件中，新增 Home 路由

由于我做的项目只是使用 ANP 其框架，所以选择将之前的路由复制一遍注释掉，在下面依葫芦画瓢写我新的路由 Home

// 首页
      {
        path: '/',
        redirect: '/home/index',
      },
      {
        path: '/home/index',
        name: 'home',
        icon: 'home',
        component: './Home/Index',
      },

新增路由截图

3. 接着要编辑上面新建的 src/pages/Home/Index.js 文件，不然是无法生成页面的

import React, { Component } from 'react';
class Home extends Component {
  render() {
    return <div>新首页</div>;
  }
}
export default Home;

页面成功生成的效果图

3. 修改导航菜单默认位置

• 编辑 src/defaultSetting.js 文件，将 layout 默认的 slidemenu 改为 topmenu

layout: 'topmenu', // nav menu position: sidemenu or topmenu

image.png

4. 相关的修改对应的文件

标记的行数因为 vscode 自动格式化会和原来的有些偏差，这里只是为了我自己方便查询所用

• src/router.config.js -> 修改项目路由配置文件会自动生成导航菜单栏
• src\pages\User\Login.js -> 去掉登录页面的第三方登录功能 113 ~ 116 行
• src\components\GlobalHeader\RightContent.js -> 导航菜单栏的右侧部分，去掉搜索 HeaderSearch 80 ~ 94 行、文档指引 Tooltip 95 ~ 104 行、消息列表 NoticeIcon 105 ~ 141 行、头像下面的个人中心、个人设置、触发报错模块 54 ~ 66 行