---
order: 4
title: 新增頁面
type: 開發
---
這里的『頁面』指配置了路由，能夠通過鏈接直接訪問的模塊，要新建一個頁面，通常只需要在腳手架的基礎上進行簡單的配置。
> 需要新建 Landing Page [請查看](https://landing.ant.design/docs/use/pro-cn)
## 一、新增 js、less 文件
在 src / pages 下創建新的 js，less 文件。 如果有多個相關頁面，您可以創建一個新文件夾來放置相關文件。
```diff
config
src
models
pages
+ NewPage.ts
+ NewPage.less
...
...
package.json
```
為了更好的演示，我們初始化`NewPage.ts`的內容如下：
```jsx
export default () => {
return <div>New Page</div>;
};
```
暫時不向本文檔中的樣式文件添加內容，您也可以嘗試自己添加內容。
樣式文件默認使用[CSS Modules](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)，如果需要，可以導入[antd less 變量](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) 在文件的頭部：
```less
@import '~antd/lib/style/themes/default.less';
```
這樣可以輕松獲取 antd 樣式變量并在文件中使用它們，這可以保持保持頁面的一致性，并有助于實現自定義主題。
## 二、將文件加入菜單和路由
加入菜單和路由的方式請參照 [路由和菜單 - 添加路由/菜單](/docs/router-and-nav#添加路由/菜單) 中的介紹完成。加好后，訪問 `http://localhost:8000/#/new` 就可以看到新增的頁面了。
<img alt="新增頁面" src="https://gw.alipayobjects.com/zos/rmsportal/xZIqExWKhdnzDBjajnZg.png" />
<br />
## 三、新增 model、service
布局及路由都配置好之后，回到之前新建的 `NewPage.js`，可以開始寫業務代碼了！如果需要用到 [dva](https://github.com/dvajs/dva/) 中的數據流，還需要在 `src/models` `src/services` 中建立相應的 model 和 service，具體可以參考腳手架內置頁面的寫法。
