umi
通过 create-umi
提供脚手架,包含一定的定制化能力。推荐使用 yarn create
命令,因为能确保每次使用最新的脚手架。
1. 创建项目
mkdir myapp && cd myapp
yarn create umi
然后,选择你需要的功能,功能介绍详见 plugin/umi-plugin-react
然后手动安装依赖
yarn
最后通过 yarn start 启动本地开发,
yarn start
一个复杂应用的目录结构如下
├── 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
├── .umirc.js // umi 配置,同 config/config.js,二选一
├── .env // 环境变量
└── package.json
2. mock
约定 mock 目录里所有的 .js 文件会被解析为 mock 文件
3. src
约定 src 为源码目录,但是可选,简单项目可以不加 src 这层目录
4. src/layouts/index.js
全局布局,实际上是在路由外面套了一层。
你的路由是:
[
{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },
]
如果有 layouts/index.js,那么路由则变为:
[
{ path: '/', component: './layouts/index', routes: [
{ path: '/', component: './pages/index' },
{ path: '/users', component: './pages/users' },
] }
]
5. src/pages
约定 pages 下所有的 (j|t)sx? 文件即路由
6. src/pages/404.js
开发模式下有内置 umi 提供的 404 提示页面,所以只有显式访问 /404 才能访问到这个页面
7. src/pages/document.ejs
有这个文件时,会覆盖默认的 HTML 模板。至少包含以下代码
<div id="root"></div>
8. src/pages/.umi
这是 umi dev 时生产的临时目录,默认包含 umi.js 和 router.js,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。
9. src/pages/.umi-production
同 src/pagers/.umi,但是是在 umi build 时生成的,会在 umi build 执行完自动删除。
10. .test.js 和 .e2e.js
测试文件,umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。
11. src/global.(j|t)sx?
在入口文件最前面被自动引入,可以考虑在此加入 polyfill。
12. src/global.(css|less|sass|scss)
这个文件不走 css modules,自动被引入,可以写一些全局样式,或者做一些样式覆盖。
13. .umirc.js 和 config/config.js
umi 的配置文件,二选一。
14. .env
环境变量,比如:
CLEAR_CONSOLE=none
BROWSER=none