简介
UMI文档
Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展（连锁反应）。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
UMI 的主要用途包括：
- 路由管理：UMI 提供了强大的路由功能，可以通过配置文件定义路由规则，支持动态路由、嵌套路由、权限控制等。
- 状态管理：UMI 集成了 dva 数据流方案，可以帮助开发者更好地组织和管理应用的状态，并提供了一套便捷的数据流操作方式。
- 插件扩展：UMI 支持通过插件机制进行功能扩展，可以使用丰富的插件来增强开发体验和功能特性，例如国际化、样式处理、代理转发等。
- 构建工具：UMI 集成了 webpack 和 babel，提供了开箱即用的构建工具，支持代码打包、优化、压缩等功能。
- 脚手架：UMI 提供了一套完整的项目脚手架，可以快速初始化项目结构，并提供了丰富的模板和示例，帮助开发者快速上手和开发。
总的来说，UMI 提供了一种高效、便捷的前端开发模式，帮助开发者在复杂的应用开发中提高效率，同时具备良好的可维护性和可扩展性。
Umi初始化
初始化umi项目框架结构等。
- mkdir myapp && cd myapp
- npm create @umijs/umi-app
- npm install
- npm start：启动项目
- npm run build：打包项目到dist
目录结构
配置复杂时用config/config.js,简单时用自带的 .umirc.js。
umi默认目录结构
├── dist/ // 默认的打包build 输出目录：npm run build
├── mock/ // mock 文件所在目录，基于 express
├── public/ // 变通的数据资源目录和一些无需打包的资源
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
└── src/ // 源码目录，可选
├── layouts/index.js // 全局布局
├── models // 数据流，自动识别models
├── components // 全局通用组件
├── wrappers // 权限管理
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名，导出 react 组件
├── index2.tsx // 页面 2，任意命名，导出 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
配置文件解析
Umi-—前端应用框架（Umi基础）
mock 存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。
node_modules 依赖包目录。
.editorconfig让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)，就可以使用EditorConfig插件，会在项目根目录寻找.editorconfig文件并使用其中定义的编码风格。
.gitignore 是一个隐藏文件，就跟这个文件的字面意思一样，它指明了在用 git上传文件的时候需要忽略哪些文件。
.prettierrc在vscode使用右键格式化的时候,会自动帮我们补全一些符号,但有些符号在eslint中就会报语法错误,可以通过在根目录创建.prettierrc文件来进行文件配置
.umirc.ts 配置文件，包含 umi 内置功能和插件的配置。
package-lock.json 锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
package.json 包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和
umi-plugin- 开头的依赖会被自动注册为插件或插件集。tsconfig.json 如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。文章来源：https://www.toymoban.com/news/detail-487771.htmltypings.d.ts 用 ts 写的模块在发布的时候仍然是用 js 发布，这就导致一个问题：ts 那么多类型数据都没了，所以需要一个
d.ts 文件来标记某个 js 库里面文章来源地址https://www.toymoban.com/news/detail-487771.html
到了这里，关于Umi3笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
