umi 入门和一些使用心得

简单介绍一句

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架
默认开启约定式路由
按需加载配置

更详细的介绍…

抄一张架构图过来

快速上手

首先得有 node，并确保 node 版本是 8.10 或以上。

$ node -v
8.1x

使用npm 或者 yarn

yarn global add umi 
npm -g install umi

// then 创建文件夹并进入文件夹
mkdir appname && cd appname
// 创建页面
umi g page index

umi g 是 umi generate 的别名，可用于快速生成 component、page、layout 等，并且可在插件里被扩展，比如 umi-plugin-dva 里扩展了 dva:model，然后就可以通过 umi g dva:model foo 快速 dva 的 model。

启动本地服务

umi dev

推荐项目参考

antd-admin
antd-admin 项目页面展示

项目结构

├── /dist/           # 项目输出目录
├── /mock/           # 数据mock
├── /public/         # 公共文件，编译时copy至dist目录
├── /src/            # 项目源码目录
│ ├── /components/   # UI组件及UI相关方法
│ ├── /layouts/      # 全局组件
│ │ └── app.js       # 页面入口
│ │ └── index.js     # 入口文件
│ ├── /models/       # 数据模型
│ ├── /pages/        # 页面组件
│ │ └── document.ejs # html模版
│ ├── /services/     # 数据接口
│ ├── /themes/       # 项目样式
│ │ ├── default.less # 全局样式
│ │ └── vars.less    # 全局样式变量
│ ├── /utils/        # 工具函数
│ │ ├── config.js