文件

官網地址
官網使用文件

正文

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 行