UmiJS基础教程（1）- 创建项目

Umi 是什么

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

Umijs的功能

1、可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

2、开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。

3、企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。

4、大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。

5、完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

6、面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

Umijs的局限性

1、需要支持 IE 8 或更低版本的浏览器。

2、需要支持 React 16.8.0 以下的 React。

3、需要跑在 Node 10 以下的环境中。

4、有很强的 webpack 自定义需求和主观意愿。

5、需要选择不同的路由方案。

项目构建

01安装node

首先得有 node，并确保 node 版本是 10.13 或以上。目前node的稳定版是12.16.2。

node下载地址：https://nodejs.org/en/。

根据不同的系统选择不同的安装方式。windows直接下载可执行文件就可以了。

温馨提示

采用如下命令：node -v 可以查看当前安装的版本。

02新建目录

新建一个目录。

windows系统直接鼠标右键就可以创建了。也可以用如下命令来创建：

温馨提示

各个系统创建目录的的命令都是一样的。

温馨提示

这里跟创建antd pro项目是不一样的的。创建antd pro 的时候，拉去模板代码的时候会根据最后一个参数来创建目录。这里要先创建目录。

创建目录之后，进入该目录。

03创建项目

通过官方工具创建项目。

温馨提示

如果是用yarn。命令如下：yarn create @umijs/umi-app

出现上图的信息，说明我们创建项目成功。

接下来安装依赖：

出现如下信息说明，依赖安装完成。（根据网络的不同，安装完成需要的时间不同）

04启用项目

上述3步操作成功之后，采用：npm run start 命令来启动项目。

出现上面两个地址说明启动成功。现在打开浏览器，输入上面的地址，出现如下的界面：

到这里，umijs的项目就创建完成了。