Umi 快速上手

2021-04-16  本文已影响0人  菜菜的小阿允
一、介绍

1、根据官网介绍,Umi(乌米),是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
2、 Umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 3000+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。
3、它主要具备以下功能:

二、什么时候不用 umi?

如果你

Umi 可能不适合你。

三、快速上手
$ node -v
v10.13.0
$ npm i yarn tyarn -g
$ tyarn -v
$ mkdir myapp && cd myapp
// 通过官方工具创建项目
$ yarn create @umijs/umi-app
$ yarn
$ yarn start

在浏览器里打开 http://localhost:8000/,能看到以下界面

import { defineConfig } from 'umi';

export default defineConfig({
+ layout: {},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

不用重启 yarn start,webpack 会在背后增量编译,过一会就可以看到以下界面


1、构建

$ yarn build

构建产物默认生成到 ./dist 下,然后通过 tree 命令查看

tree ./dist

./dist
├── index.html
├── umi.css
└── umi.js

2、本地验证
发布之前,可以通过 serve 做本地验证

$ yarn add serve
$ yarn serve ./dist

访问http://localhost:5000,正常情况下应该是和执行 yarn start 时是一致的。

3、部署
本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。

上一篇 下一篇

猜你喜欢

热点阅读