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 記錄二：登陸/註冊頁面邏輯，調用後臺