添加页面

添加教程需要的页面

根据上一节课的布局，我们需要用到三个页面，英雄页面，局内道具页面，召唤师技能页面。所以我们使用 umi g page 新建我们需要的三个页面。

$ umi g page hero --typescript --less
Write: src/pages/hero.tsx
Write: src/pages/hero.less
$ umi g page item --typescript --less
Write: src/pages/item.tsx
Write: src/pages/item.less
$ umi g page summoner --typescript --less
Write: src/pages/summoner.tsx
Write: src/pages/summoner.less

页面创建成功，启动umi开发服务器（这是我们最后一次演示，如何启动umi开发服务器）

$ yarn start
Compiling
✔ success webpack compiled in 3s 754ms
 DONE  Compiled successfully in 3761ms                                                 19:40:39
  App running at:
  - Local:   http://localhost:8000/ (copied to clipboard)
  - Network: http://192.168.199.195:8000/

启动完成，我们可以通过直接访问路由的方式，访问页面。 http://localhost:8000/summoner 、http://localhost:8000/hero、http://localhost:8000/item

添加页面，以下方法任选其一即可：

方法一 手动添加页面

在 ./src/pages/ 下新建js或ts文件，如新建 ./src/pages/list/index.tsx 或者 ./src/pages/list.tsx ，输入

export default function() {
  return (
    <div>
      <h1>List work!</h1>
    </div>
  );
}

这是最简单的一个页面了，当然如果你需要为你的页面添加样式，那就可以在头部引入。

方法二 使用umi g page

在项目根目录，执行

$ umi g page item
   create src/pages/item.js
   create src/pages/item.css
✔  success

会自动新建，页面的 js 文件和 css 文件。使用 --typescript --less 来选择性的指定文件类型。