【開發】3.5-新增頁面

這裏的『頁面』指配置了路由,能夠通過鏈接直接訪問的模塊,要新建一個頁面,通常只需要在腳手架的基礎上進行簡單的配置。

需要新建 Landing Page 請查看

1. 新增 js、less 文件

src/pages 下創建新的 js、less 文件。 如果有多個相關頁面,您可以創建一個新文件夾來放置相關文件。

config
src
  models
  pages
+   NewPage.js
+   NewPage.less
  ...
...
package.json

爲了更好的演示,我們初始化NewPage.js的內容如下:

export default () => {
  return <div>New Page</div>;
};

暫時不向本文檔中的樣式文件添加內容,您也可以嘗試自己添加內容。

樣式文件默認使用CSS Modules,如果需要,可以導入antd less 變量 在文件的頭部:

@import '~antd/lib/style/themes/default.less';

這樣可以輕鬆獲取 antd 樣式變量並在文件中使用它們,這可以保持保持頁面的一致性,並有助於實現自定義主題。

2. 將文件加入菜單和路由

加入菜單和路由的方式請參照路由和菜單 - 添加路由/菜單中的介紹完成。加好後,訪問 http://localhost:8000/#/new 就可以看到新增的頁面了。

在這裏插入圖片描述

3. 新增 model、service

佈局及路由都配置好之後,回到之前新建的 NewPage.js,可以開始寫業務代碼了!如果需要用到 dva 中的數據流,還需要在 src/modelssrc/services 中建立相應的 model 和 service,具體可以參考腳手架內置頁面的寫法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章