這裏的『頁面』指配置了路由,能夠通過鏈接直接訪問的模塊,要新建一個頁面,通常只需要在腳手架的基礎上進行簡單的配置。
需要新建 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/models
、src/services
中建立相應的 model 和 service,具體可以參考腳手架內置頁面的寫法。