umi初次尝试

跟着umi的官方教程一步一步来。

$ yarn global add umi //全局安装umi
$ mkdir myapp && cd myapp //新建一个项目目录
$ umi g page index
$ umi g page users //新建一些页面，umi g 是 umi generate 的别名，可用于快速生成 component、page、layout 等
$ tree //查看目录
.
└── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js

pages 目录是页面所在的目录，umi 里约定默认情况下 pages 下所有的 js 文件即路由。
$ umi dev //启动本地服务器

---

通过脚手架安装

shell
yarn create umi //安装umi脚手架
success Installed "[email protected]" with binaries:
      - create-umi
? Select the boilerplate type 
? Select the boilerplate type app //单独项目
? Do you want to use typescript? No
? What functionality do you want to enable? antd, dva, internationalization

选装的插件:antd-组件，dva-状态管理，internationalization-国际化
之后使用yarn安装依赖，大致的目录结构如下

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 运行时配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

未完