Umi学习笔记（一）——初识Umi

前言
最近做迭代的时候接触到公司的一个小项目是用的umi框架，所以这里对umi框架做一个简单的介绍，也算是学习笔记吧。

一、关于Umi

Umi是一个用JavaScript编写的用于构建企业级前端应用的框架。它由蚂蚁金服的前端团队开发，于2017年开源。Umi是一个快速、可扩展、开箱即用的前端框架，它集成了webpack、babel、eslint、Jest等工具，并提供了丰富的脚手架和插件，可以帮助开发者快速搭建一个企业级的前端项目。

二、创建Umi项目

这里先介绍一下项目的创建，你可以通过 yarn 或者 npm 来创建 Umi 项目。

# 使用 yarn 创建项目
yarn create umi my-app

# 使用 npm 创建项目
npx create-umi my-app

三、Umi项目的目录结构

一个Umi项目的基本目录结构如下：

my-app/
  |- node_modules/
  |- public/
  |- src/
    |- app.js
    |- components/
    |- pages/
    |- models/
    |- services/
    |- utils/
  |- .umirc.js
  |- package.json

• node_modules/ 目录是依赖项目录，其中包含了项目运行所需的依赖包。
• public/ 目录是静态资源目录，其中可以放置项目中用到的静态资源文件，例如图片、CSS文件、JavaScript文件等。
• src/ 目录是源代码目录，其中包含了项目的主代码文件。
• app.js 文件是项目的入口文件，它负责初始化项目并启动项目。
• components/ 目录是组件目录，其中可以放置项目中用到的组件。
• pages/ 目录是页面目录，其中可以放置项目中的各个页面。
• models/ 目录是模型目录，其中可以放置项目中用到的模型。
• services/ 目录是服务目录，其中可以放置项目中用到的服务。
• utils/ 目录是工具目录，其中可以放置项目中用到的工具函数。
• .umirc.js 文件是项目的配置文件，其中可以配置项目的各种参数。
• package.json 文件是项目的包文件，其中包含了项目的基本信息和依赖项信息。

四、Umi项目的运行

要运行Umi项目，你可以使用以下命令：

# 在开发模式下运行项目
yarn start

# 在生产模式下运行项目
yarn build

• yarn start 命令会在开发模式下运行项目，此时项目会自动监听文件变化，并自动重新编译和刷新浏览器。
• yarn build 命令会在生产模式下运行项目，此时项目会被编译成一个静态文件，然后部署到服务器上。

五、Umi项目的部署

Umi项目可以部署到各种服务器上，例如 Nginx、Apache、Tomcat 等。具体部署方法请参考服务器的官方文档。

结语

Umi是一个快速、可扩展、开箱即用的前端框架，它集成了webpack、babel、eslint、Jest等工具，并提供了丰富的脚手架和插件，可以帮助开发者快速搭建一个企业级的前端项目。