umi 里使用

umi 脚手架为 ant design 提供的可插拔的企业级 react 应用框架，具体教程请查看。

使用 demo 地址请查看 umi-example;

文件路径

创建文件我们分三步来完成：

  • 首先我们创建一个文件目录，在文件夹里创建一个 src 文件夹；

  • 使用 umi 的 umi generate page index 创建一个 index 页；

  • 我们将从 landing 上下载的 Home 文件包和 pages 放至 src 文件包里；

  1. │── src
  2. │ │── Home 
  3. │    │── less
  4. │    │── index.js
  5. │    └── ...
  6. │ └── pages     
  7. │    │── index.js
  8. │    │── index.less

安装依赖

安装 react 和 react-dom, npm install react react-dom —save;

详细参考开始使用里的安装依赖;

这里我们还需要安装 npm install umi-plugin-react —save-dev, 再创建 .umirc.js 在根目录里, 现在目录结构为：

  1. │── node_modules
  2. │  └── ...
  3. │── src
  4. │  └── ...
  5. └── .umirc.js

添加 umi-plugin-react;

在 .umirc.js 里添加 plugins 即可：

  1. export default {
  2.   plugins: [
  3.     [
  4.       'umi-plugin-react', {
  5.         antd: true,
  6.       }
  7.     ],
  8.   ]
  9. }

修改入口文件

更改刚才创建的 index 页面，打开 index.js，引入 Home 文件包并渲染。

  1. - import styles from './index.css';
  2. + import Home from '../Home';
  4. export default function() {
  5.   return (
  6. -   <div className={styles.normal}>
  7. -     <h1>Page index</h1>
  8. -   </div>
  9. +   <Home />
  10.   );
  11. }

CSS Modules

umi 同样使用了 css-modules, 同样我们提供了以下几种解决方案。

在全局样式里引用

在 src 里新建一个 global.less; 在 global.less 里引入 Home 样式: 

  1. @import './Home/less/antMotionStyle.less';

如果选择这个方案，我们需要删除 Home 的 index.jsx 里的 import './less/antMotionStyle.less';

使用 css-module 的 global

使用 css-modules 的 global, 在 index.less 里添加 :global, 将样式不作转换, global 具体使用请查看开始使用。

关闭 css-modules

如果你当前项目为新项目，且对 css-modules 并不是太了解，可以选择关闭 css-modules，只需要在 .umirc.js 文件里增加 disableCSSModules: true。

  1. export default {
  2. + disableCSSModules: true,
  3.   plugins: [
  4.     [
  5.       'umi-plugin-react', {
  6.         antd: true,
  7.       }
  8.     ],
  9.   ]
  10. }

完成

完成以上步骤之后，我们再启动 umi dev 即可查看在 landing 上下载的模板。

额外内容

如果是单个页面的不必要往下看。

多页面路由

带 router 的 demo 地址 umi-example#router;

此块功能不是必要，如果有多个静态页面的情况下，我们可以在 umi 的 src 下新建 layouts/index.js 文件，具体可以查看 umiJS Global Layout

  1. │── src
  2. │ │── Home 
  3. │    │── less
  4. │    │── index.js
  5. │    └── ...
  6. │ └── pages     
  7. │    │── index.js
  8. │    │── index.less
  9. + └── layouts           
  10. +    │── index.js

先转移 Nav 和 Footer

将 Home 里的 Header 和 Footer 提取放到 layouts/index.js 里即可。然后再将 Home/index.js 里跟 Header 和 Footer 相关的内容全部删除, 再将 data.source.js 里跟 Header 和 Footer 相关的内容全部剪切到 layouts/data.source.js 里。

注：文件转移后，请注意修改 import 相关的内容。

Home/index.js 更改参考 index.jsx

  1. │── src
  2. │ │── Home 
  3. │    │── less
  4. -    │    │── nav0.less  
  5. -    │    │── footer0.less  
  6. *    │── index.js
  7. -    │── Nav0.jsx  
  8. -    │── Footer0.jsx  
  9. *    │── data.source.js
  10. │    └── ...
  11. │ └── pages     
  12. │    │── index.js
  13. │    │── index.less
  14. │    │── page2.js
  15. │ └── layouts           
  16. │    │── index.js  
  17. +    │── Nav0.jsx  
  18. +    │── nav0.less  
  19. +    │── Footer0.jsx  
  20. +    │── footer0.less  
  21. +    │── data.source.js

再引入 nav0.less 和 footer0.less

如果 less 引入是 在全局样式里引用 时，我们需要将 nav0.less 和 footer0.less 以同样的方法引入;

再添加 layouts/index.js 内容

  1. import React, { Component } from 'react';
  2. import { enquireScreen } from 'enquire-js';
  3. import Header from './Nav0';
  4. import Footer from './Footer0';
  6. import {
  7.   Nav00DataSource,
  8.   Footer00DataSource,
  9. } from './data.source.js';
  11. class Layout extends Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.state = {
  15.       isMobile,
  16.     };
  17.   }
  19.   componentDidMount() {
  20.     // 适配手机屏幕;
  21.     enquireScreen((b) => {
  22.       this.setState({ isMobile: !!b });
  23.     });
  24.   }
  26.   render() {
  27.     return (
  28.       <>
  29.         <Header dataSource={Nav00DataSource} isMobile={this.state.isMobile} />
  30.         {this.props.children}
  31.         <Footer dataSource={Footer00DataSource} isMobile={this.state.isMobile} />
  32.       </>
  33.     );
  34.   }
  35. }
  37. export default Layout;

添加页面

将 Landing 上下载的另一个页面换个名称，如 Page2, 拷贝到 src 文件包里, 注: 不需要 Nav 和 Footer，然后在 pages 里添加 page2.js。

  1. │── src
  2. │ │── Home 
  3. │    │── less
  4. │    │── index.js
  5. │    └── ...
  6. + │── Page2 
  7. +    │── less
  8. +    │── index.js
  9. +    └── ...
  10. │ └── pages     
  11. │    │── index.js
  12. │    │── index.less
  13. +    │── page2.js
  14. │ └── layouts           
  15. │    │── index.js

page2.js

添加文件指向

  1. import Page2 from '../Page2';
  3. export default function () {
  4.   return (
  5.     <Page2 />
  6.   );
  7. }

修改 Nav0 相关参数

先修改 layouts 里的 Nav0 文件的标签

./src/layouts/Nav0
  1. import React from 'react';
  2. ...
  3. import { Menu } from 'antd';
  4. +import NavLink from 'umi/navlink';
  6. const Item = Menu.Item;
  8. class Header extends React.Component {
  9.   ....
  10.     const navChildren = Object.keys(navData).map((key, i) => (
  11.       <Item key={i.toString()} {...navData[key]}>
  12. -       <a
  13. +       <NavLink
  14.           {...navData[key].a}
  15. +         href={navData[key].a.href}
  16. +         to={navData[key].a.href}
  17.           target={navData[key].a.target}
  18.         >
  19.           {navData[key].a.children}
  20. -       </a>
  21. +       </NavLink>
  22.       </Item>
  23.   ...
  24. }
  26. export default Header;

再修改 layouts/data.source.js 里的 href 值;

  1. export const Nav00DataSource = {
  2.   ...
  3.   Menu: {
  4.     className: 'header0-menu',
  5.     children: [
  6. -     { name: 'item0', a: { children: '导航一', href: '' } },
  7. +     { name: 'item0', a: { children: '导航一', href: '/' } },
  8. -     { name: 'item1', a: { children: '导航二', href: '' } },
  9. +     { name: 'item1', a: { children: '导航二', href: '/page2' } },
  10.       { name: 'item2', a: { children: '导航三', href: '' } },
  11.       { name: 'item3', a: { children: '导航四', href: '' } },
  12.     ],
  13.   },
  14.   ...
  15. };

Router 完成

完成以上步骤之后，我们再启动 umi dev 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。