写在前面#

安装nodejs、yarn和建文件夹就省略了。项目初始化之后就是问题集。

初始化#

输入以下命令：

yarn create umi

自动运行，后面会有几个选项，这是我的选项

? Select the boilerplate type app
? Do you want to use typescript? No //按N，不使用typescript
? What functionality do you want to enable? antd //使用antd，目前只使用一个后期可以再修改配置

后面

   create .editorconfig
   create .env
   create .eslintrc
   create .prettierignore
   create .prettierrc
   create .umirc.js
   create mock/.gitkeep
   create src/global.css
   create src/layouts/__tests__/index.test.js
   create src/layouts/index.css
   create src/layouts/index.js
   create src/pages/__tests__/index.test.js
   create src/pages/index.css
   create src/pages/index.js
   create webpack.config.js
✨ File Generate Done
✨  Done in 48.91s.

完成之后输入命令，来获取umi的依赖

yarn

运行完成之后。项目文件下载正式完成。接下来可以运行

运行项目#

开发版

yarn start
//或者
umi dev

打包版，生成dist目录，即为打包后项目。

yarn build
//或者
umi build

注意：打包版不包括mock

问题集#

好的，现在来说明一些遇到的问题和部分解决方法。

组件props没有路由信息#

使用withRouter在导出的位置加上withRouter(组件名)，即可在this.props中找到路由信息。

import { Component } from 'react';
import { withRouter } from 'umi';
import Style from './style.css';

class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className={Style.nav_bar}>
       导航
      </div>
    );
  }
}
export default withRouter(Nav);

默认html模版#

src/pages/document.ejs

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <% if (context.title != null) { %>
        <title><%= context.title %></title>
    <% } %>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="<%= context.publicPath %>favicon.png" />
</head>
<body>
    <div id="<%= context.config.mountElementId %>"></div>
</body>
</html>

…持续更新

分类: 文章

标签: umi react

iqszlong

鲁迅说：我没说过

Umi上手指南