Umi安装教程

1. Umi

umi 是由 dva 的开发者 云谦 编写的一个新的 React 开发框架。umi 既是一个框架也是一个工具，你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少开发者的代码量。

umi 是通用方案，适用于现在几乎所有的 web 环境。

Umi 的优势

umi 是一个专注性能的类 next.js 端框架，它的优势是：

• 内置大量的性能优化多端，无缝支持容器和浏览器访问
• 类 webpack 的插件机制
• 针对 antd 和 dva 有友好的支持
• umi 最显著的特点就是「文件即路由」——在 pages 文件夹下新建文件，umi 将自动生成与文件路径对应的路由。在大部分其他前端框架中，路由配置一直是一个很麻烦的事情，而对于多人协作开发的项目，公共的配置文件则可能面临着更多的冲突。
• 🎉 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
  📦 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
  🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
  🚀 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
  🌴 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
  🚄 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

2.安装

1)环境准备

开发环境已经安装了 Node.js，umi 需要 Node.js 10.13 版本以上
检测 Node.js 版本，可以在终端/控制台窗口中运行 node -v 命令。

2)安装Umi

后续需要使用 umi 来创建页面 umi g ，并执行多种任务，比如测试 umi test、打包 umi build 和开发 umi dev 等。为了能直接在命令行中运行这些命令，你需要打开终端/控制台窗口，输入以下命令来全局安装 umi ：

npm install -g umi

推荐使用 yarn 代替 npm 来安装 umi ， yarn 会针对部分场景做一些缓存以节省时间，你可以输入以下命令来全局安装 yarn ：

npm install -g yarn

命令行执行结束后，判断 yarn 是否安装成功：

$ yarn -v

然后使用 yarn 安装 umi ：

$ yarn global add umi

命令行执行结束后，判断 umi 是否安装成功：

$ umi -v

3)新建一个简单的 umi 项目

任意目录新建一个名为 my-app 的文件夹：

$ mkdir my-app

在webstrom或vscode终端通过 umi g page 来创建页面：

$ umi g page home

现在，你应该已经得到了以下的目录结构：

└── pages
├── home.css
├── home.js
└── list.js

4) 启动开发服务器

 umi dev