添加页面

添加教程需要的页面

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

  1. $ umi g page hero
  2.    create pages/hero.js
  3.    create pages/hero.css
  4. ✔  success
  5. $ umi g page item
  6.    create pages/item.js
  7.    create pages/item.css
  8. ✔  success
  9. $ umi g page summoner
  10.    create pages/summoner.js
  11.    create pages/summoner.css
  12. ✔  success

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

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

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

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

方法一 手动添加页面

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

  1. export default function() {
  2.   return (
  3.     <div>
  4.       <h1>List work!</h1>
  5.     </div>
  6.   );
  7. }

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

方法二 使用umi g page

在项目根目录，执行

  1. $ umi g page item
  2.    create src/pages/item.js
  3.    create src/pages/item.css
  4. ✔  success

会自动新建，页面的js文件和css文件。这是一个比较通用的模版，你要使用dva的功能，就要在这里面再增加一些文件和方法。官方提供的，要面向是否使用dva的情况，所以模版比较简化。

方法三 使用oni-cli创建页面

这个呢，是我自己写的。你们有什么特定的需求可以到这个项目的iss上提。 全局安装oni-cli

  1. $ yarn global add oni-cli
  2. 或者
  3. $ npm i -g oni-cli

使用oni-cli创建页面

  1. $ oni g page hero
  2. generate index hero

将会创建

  1. .
  2. └── hero
  3.     ├── components
  4.     │   ├── Example.js
  5.     │   └── Example.less
  6.     ├── index.js
  7.     ├── index.less
  8.     ├── models
  9.     │   └── hero.js
  10.     └── services
  11.         └── hero.js

会创建umi with dva项目，需要的文件，和自动在页面中使用model 以下展示index.js

  1. import { connect } from 'dva';
  2. import styles from './index.less';
  3. function App({hero,dispatch}) {
  4.     const { text,list } = hero;
  5.     return (
  6.         <div className={styles.normal}>
  7.             <h2>
  8.                 {text}
  9.             </h2>
  10.         </div>
  11.     );
  12. }
  13. export default connect(({hero})=>({hero}))(App);

所以看你自己需要的文件数，选择不同的添加页面方式。

注意：oni-cli也有初始化项目的能力，和create-umi相同，但是新建的模版是我个人喜好的目录结构，这里还是推荐新建项目，使用官方的cli ——- create-umi，毕竟有些新的能力，官方的工具跟进的比较快，而且官方的写法也比较好