文档

官网地址
官网使用文档

正文

1. 安装 & 使用

  1. 安装
    官网文档参考地址 - 安装 ``` git clone —depth=1 https://github.com/ant-design/ant-design-pro.git my-project cd my-project
  2. 2. 使用<br />
  3. [官网文档参考地址 - 本地开发](https://pro.ant.design/docs/getting-started-cn#%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91)<br />
  4. [官网文档参考地址 - 构建](https://pro.ant.design/docs/deploy-cn#%E6%9E%84%E5%BB%BA)<br />
  5. [官网文档参考地址 - 分析构建文件体积](https://pro.ant.design/docs/deploy-cn#%E5%88%86%E6%9E%90%E6%9E%84%E5%BB%BA%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF)

安装依赖

npm install

or

yarn

本地启动

npm start

构建 (dist)

npm run build

分析构建文件体积

npm run analyze

  1. ###2.  新增页面(这里以新建 `Home` 页面为例)
  3. > [参考地址](https://blog.csdn.net/u013416951/article/details/80858318)
  6. 1. 首先在 `src/pages/` 目录下新建一个 `Home` 文件夹，再在文件夹中新建两个文件 `Index.js` 和 `Index.less`
  8. > ![新建文件截图](https://upload-images.jianshu.io/upload_images/9064013-43cdf61822025aeb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  11. 2. 之后在 `config/router.config.js` 路由配置文件中，新增 `Home` 路由
  13. > 由于我做的项目只是使用 ANP 其框架，所以选择将之前的路由复制一遍注释掉，在下面依葫芦画瓢写我新的路由 `Home`

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

  2. > ![新增路由截图](https://upload-images.jianshu.io/upload_images/9064013-da12e9e9ae0e8b33.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. 3. 接着要编辑上面新建的 `src/pages/Home/Index.js` 文件，不然是无法生成页面的

import React, { Component } from ‘react’; class Home extends Component { render() { return

新首页
; } } export default Home;

  2. > ![页面成功生成的效果图](https://upload-images.jianshu.io/upload_images/9064013-c42163defa3f5402.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. ###3.  修改导航菜单默认位置
  7. - 编辑 `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 行