项目结构
.
├── mock
├── package.json
├── src
│ ├── app.js
│ ├── assets
│ │ └── yay.jpg
│ ├── global.css
│ ├── layouts
│ │ ├── index.css
│ │ └── index.js
│ ├── models
│ └── pages
│ ├── index.css
│ └── index.js
├── .env
└── .umirc.js
这里是我们当前项目的目录结构,使用create-umi创建的项目,是一个典型的umi项目结构,我们可以在umi约定使用的目录中,添加我们所需要的内容,达到快速实现功能需求的目的。
./mock/
约定 mock 目录里所有的 .js
文件会被解析为 mock 文件。
比如,新建 mock/users.js
,内容如下:
export default {
'/api/users': ['a', 'b'],
}
然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 ['a', 'b']
了。
注意请求地址和mock里面的文件名无关,只和文件内部的定义相关。你可以取任意的命名,但为了更好的维护项目,你应该取一些语意化更好的名字
./src/
我们约定了将项目的所有源码放在
src
目录里面,umi项目的大部分的工作都将在这里进行。当我们运行umi dev
或者umi build
时,我们的代码会被转换成浏览器能够运行的正确的JavaScript版本,所以我们可以在这里使用TypeScript或者其他JavaScript新语法。
./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' },
] }
]
从组件角度可以简单的理解为如下关系:
<layout>
<page>1</page>
<page>2</page>
</layout>
只要存在
layouts/index.js
就生效,如果你不需要这个,那你只能将它重命名为别的名字。./src/pages/
约定 pages 下所有的 (j|t)sx?
文件即路由。在umi中可以使用约定式路由和配置式路由,在实际项目开发中,我个人偏向于使用,约定式路由。毕竟这是umi的主要特性之一。使用约定式路由,意味着不需要维护,可怕的路由配置文件。最常用的有基础路由和动态路由(用于详情页等,需要从url取参数的情况)
基础路由
假设 pages
目录结构如下:
+ pages/
+ users/
- index.js
- list.js
- index.js
那么,umi 会自动生成路由配置如下:
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/list', component: './pages/users/list.js' },
]
动态路由
umi 里约定,带 $
前缀的目录或文件为动态路由。
比如以下目录结构:
+ pages/
+ $post/
- index.js
- comments.js
+ users/
$id.js
- index.js
会生成路由配置如下:
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
{ path: '/:post/', component: './pages/$post/index.js' },
{ path: '/:post/comments', component: './pages/$post/comments.js' },
]
./src/pages/404.js
当访问的路由地址不存在时,会自动显示404 页面。只有build之后生效。调试的时候可以访问 /404
。
注意开发模式下有内置 umi 提供的 404 提示页面。
./src/pages/document.ejs
有这个文件时,会覆盖默认的 HTML 模板。需至少包含以下代码,
<div id="root"></div>
常用于需要设置网站名称,增加meta,增加头部js等情况。
虽然上述这些功能都可以通过umi的配置或方法实现,但是,显示的在这个文件中维护,会更加清晰一些。
./src/pages/.umi/
这是 umi dev 时生产的临时目录,默认包含 umi.js
和 router.js
,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。
以上说明来自umi官网,如果你不理解,或者不想理解太多umi的细节,你可以不要理会这些文件。
./src/pages/.umi-production/
同 src/pagers/.umi
,但是是在 umi build
时生成的,会在 umi build
执行完自动删除。
以上说明来自umi官网,如果你不理解,或者不想理解太多umi的细节,你可以不要理会这些文件。
文件名后缀.test.js 和 .e2e.js
测试文件,umi test
会查找所有的 .(test|e2e).(j|t)s 文件跑测试。
./src/global.(j|t)sx?
在入口文件最前面被自动引入,可以考虑在此加入 polyfill。umi区别于其他前端框架,没有显示的程序主入口,如src/app.js
或src/index.js
,所以在引用某些模块的时候,如果模块功能要求在程序主入口添加代码时,你就可以写到这个文件。
./src/global.(css|less|sass|scss)
这个文件不走 css modules,自动被引入,可以写一些全局样式,或者做一些样式覆盖。
.umirc.js 和 ./config/config.js
umi 的配置文件,二选一。当两者同时存在时,优先使用.umirc.js。
.env
环境变量,比如:
BROWSER=none