UmiJS 3.X实战从头开始（二）：如何使用

• 需要了解的目录及文件：

建立第一个umi项目并启动后，可能会有一个疑问：这个项目的启动文件在哪呢？一般来说，我们通过react的脚手架建立的项目中，在src文件夹的根目录会有一个index.js文件，在index.js里我们通过ReactDOM的render命令来启动项目。然而在umi的项目中，src根目录下并没有index.js文件，也找不到render这样的指令代码。

查看package.json文件里的start命令，我们知道项目的是通过umi指令启动的，而umi启动的入口文件，其实就是 src/.umi/umi.ts。

从官网的文档我们可以了解到，.umi是一个临时文件夹，.umi 临时目录是整个 Umi 项目的发动机，入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

同时，临时文件是 Umi 框架中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。因为他的临时性，每次启动 umi 时都会被删除并重新生成。

而项目的基础配置则是放在项目根目录的.umirc.ts文件中。如果需要多平台复杂配置，则不用.umirc.ts文件，在根目录下建立config文件夹，在文件夹下建立多个文件进行配置。例如以下示例：

当我们改变配置时，重新启动项目，src/.umi目录下的内容就会根据我们的配置重新生成，也就是说，这个入口文件夹里的内容是在我们编码过程中，根据我们的配置和插件内容的变化而动态变化生成的。

另外我们还可以在src的根目录建立global.tsx，global.less这里两个文件，这两个文件默认会在项目启动前被引入，global.less可以放置一些全局的样式，global.tsx可以处理一些全局性的异步事件等。

• 约定化的思想：

(以下内容转自：http://www.zyiz.net/tech/deta...

umi的很多东西都是约定式的。所谓约定式就是指，按照约定好的方式开发，就能达到某种效果，中间的过程由框架帮我们完成。例如：

• 建一个 locales 目录，就拥有了国际化
• 建一个 models 目录，就拥有了数据流
• 建一个 mock 目录，就拥有了数据 mock
• 建一个 access.ts 文件，就拥有了权限策略
• ...

这看起来是非常黑盒非常酷的，用这种方式其实对于团队代码风格的统一是非常有好处的，直接在框架层面就约束了大家的目录组织模式，便于团队维护。

但是缺点也是挺明显的，灵活性不如配置式的高，因为只能按特定的模式来开发，如果原本约定的方式不满足业务需求，就需要额外开发umi插件来魔改原本的功能。而且约定式的开发是相对其他框架来说很特别的一点，对新上手的同学来说需要时间去通读官网文档了解约定式的规则。