antd pro2.0 使用記錄一：登錄/注冊/底部版權等設置

1.下載項目源碼

從 github 上面下載源碼，代碼如下

---

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

下載好的項目如圖

2. 刪除無關代碼

2.1 下圖是刪除跟開發無關的文件夾以及無關的文件后的效果

2.2 刪除package.json中其他無關的 npm 命令行

    刪除前

   

 

   刪除后，圖片中有個注意事項請關注以下

  

 

3.安裝依賴以及啟動項目

ps:我這里采用『WebStorm』開發 1.在當前目錄輸入以下命令

---

 

> nmp install

> nmp start 

---

運行后瀏覽器會自動打開出現如下界面

這樣第一部分的項目導入就算完成了

基本源碼結構，部分主要簡介：

　config/router.config.js  -- 路由菜單

    mock/... -- 模擬數據

    src/ components -- 組件（細），為 pages 里的 頁面服務

        / e2e -- ?

       /layouts   全部只是布局相關的，與具體顯示內容信息無關

                / ***.js  提供對應方法

               /****.less  布局設置

     /models -- 全局的共享數據

    / pages --- 具體頁面如入口

   /services -- 后台服務方法定義

   /utils -- 公用方法

  

簡單的更改

1. 初始頁面更改

    顯示標題： 

   src/defaultSettings.js，設置如： title: '網絡平台', 

    src/pages/document.ejs，設置如： <title>網絡平台</title> 

   src/service-worker.js，設置如： prefix: '網絡平台', 

   用戶登錄頁面：

   src/layouts/UserLayout.js，設置登錄/注冊頁面文字描述如：  Copyright <Icon type="copyright" /> 2018-2019 ***公司 ， span className={styles.title}>網絡平台</span> ，...描述信息

   src/pages/User/Login.js，設置登錄框部分信息

   src/layouts/UserLayout.less，登錄框/注冊框樣式

   用戶注冊頁面：

   src/pages/User/Register.js，設置注冊框部分信息

   其余同 用戶登錄頁面

   

 2. 前端端口更改：

     package.json，設置如： "start": "umi dev --port=8009", 

3. 登錄進入系統頁面的底部版權問題：

 

設置位置：src/layouts/Footer.js

 

4. 內部左側圖標問題：

src/layouts/BaseLayout.js 更改為： import logo from '../../public/favicon.png'; 

 

 

下篇：antd pro2.0 記錄二：登錄/注冊頁面邏輯，調用后台