Ant Design Pro 框架使用篇(持續更新)

weixin_34146805發表於2018-10-10
框架

文件

官網地址
官網使用文件

正文

1. 安裝 & 使用

  1. 安裝
    官網文件參考地址 - 安裝 
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
  1. 使用
    官網文件參考地址 - 本地開發
    官網文件參考地址 - 構建
    官網文件參考地址 - 分析構建檔案體積 
# 安裝依賴
npm install
# or
yarn

# 本地啟動
npm start

# 構建 (dist)
npm run build

# 分析構建檔案體積
npm run analyze

2. 新增頁面(這裡以新建 Home 頁面為例)

參考地址

  1. 首先在 src/pages/ 目錄下新建一個 Home 資料夾，再在資料夾中新建兩個檔案 Index.js 和 Index.less
9064013-43cdf61822025aeb.png
新建檔案截圖
  1. 之後在 config/router.config.js 路由配置檔案中，新增 Home 路由

由於我做的專案只是使用 ANP 其框架，所以選擇將之前的路由複製一遍註釋掉，在下面依葫蘆畫瓢寫我新的路由 Home

// 首頁
      {
        path: '/',
        redirect: '/home/index',
      },
      {
        path: '/home/index',
        name: 'home',
        icon: 'home',
        component: './Home/Index',
      },
9064013-da12e9e9ae0e8b33.png
新增路由截圖
  1. 接著要編輯上面新建的 src/pages/Home/Index.js 檔案，不然是無法生成頁面的
import React, { Component } from 'react';
class Home extends Component {
  render() {
    return <div>新首頁</div>;
  }
}
export default Home;
9064013-c42163defa3f5402.png
頁面成功生成的效果圖

3. 修改導航選單預設位置

  • 編輯 src/defaultSetting.js 檔案，將 layout 預設的 slidemenu 改為 topmenu 
layout: 'topmenu', // nav menu position: sidemenu or topmenu
9064013-aeaa6eb45e10bc04.png
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 行

相關文章