第一個頁面 · Sword開發手冊

## 新建頁面 1. 進入src/pages目錄新建Platform/Demo文件夾以及Demo.js文件 ![](https://box.kancloud.cn/bdd52bb44b0f9db3ef39339ed5e4ead9_1708x1044.png) 2. Demo.js是一個最簡單的頁面文件 ## 代碼講解 1. 前兩行作用是從 `react` 和`antd`模塊引入所需的 `React` ,`PureComponent`,`Form`。 2. `@Form.create()`是一種裝飾器，可以將后續講到的Form組件所需的元素引入并調用。 3. `class Demo extends PureComponent`使用了語法糖，提高代碼的可讀性，其目的是創建一個`類` ，可供外部直接引用。 4. `render()`方法是重點，返回了頁面主要呈現的元素，后期我們構建頁面也是在這個方法里編寫。 5. `export default Demo`則是將編寫的Demo導出，供其他模塊引入、發現。 ## 創建路由 1. Sword工程使用了umi的配置型路由，每個頁面都對應一個路由，配置好之后即可訪問 2. 找到config/router.config.js文件 ![](https://box.kancloud.cn/a55f7e28b4cf5c90e8ee8537fd730dde_732x296.png) 3. 在文件底部增加如下配置 ![](https://box.kancloud.cn/bcd1fc159ba27c8c3dec4e93c13b523a_2440x1176.png) ## 路由講解 1. 最外層的path代表路由訪問地址，我們可以把他看成菜單的頂層 2. 最外層的routes代表此大模塊下所有的路由信息 3. routes下的path代表子路由的地址 4. redirect代表訪問path對應的路由后會跳轉至redirect里配置的路由地址 5. component代表路由對應的文件地址，訪問后則會加載出對應的頁面，結尾的Demo.js可以簡寫成Demo ## 啟動系統 1. 啟動系統，登陸后在地址欄加上 /platform/demo，發現路由地址變成了/platform/demo/list，redirect配置生效，頁面上也看到了我們所編寫的`測試頁面`四個字 ![](https://box.kancloud.cn/5d1d6f7f65b55f22a06ab4fe72094333_1644x896.png) 2. 修改文字，查看系統不用重啟，頁面已經自動刷新成功 ![](https://box.kancloud.cn/82155e12f968b68af397d50eceba11dd_926x426.png) ![](https://box.kancloud.cn/2a029b2cac88fda968fe1dab1e30b242_858x642.png) ## 后續第一個頁面我們新增成功了，那么下一章讓我們來學習下如何引入Ant Design的組件并簡單使用