最近有發現了一套dva過後的新的React應用框架--UmiJs（當然也可叫做“優米”或者“五米”），網址：https://umijs.org/zh-Hans/，github地址：https://github.com/umijs/umi。

不知道，對UmiJs這套框架有所瞭解的小夥伴們，對這套框架有什麼看法呢？請留言哦！

也是剛剛瞭解這套框架，那麼廢話少說我們來切入主題吧。umi 就是一套零配置，按最佳實踐進行開發的前端框架。

具有以下幾點特性：

1、高效能

    PWA、按需載入、tree-shake、scope-hoist、智慧提取公共檔案、Critical CSS、preload、hash build、preact 等等，並且，你相同的程式碼會隨著 umi 的改進而不斷提升效能。

2、開箱即用

    你只需一個依賴 umi 就可啟動開發，而無需安裝 react、preact、react-router、eslint、babel、jest 等。

3、多端

    一鍵切換單頁和多頁，一份程式碼同時部署到 cdn、容器、雲鳳蝶等環境，詳見部署文件。

4、擴充套件性

    umi 的整個生命週期都是外掛化的，甚至就是由大量外掛組成，比如 http mock、service worker、layout、高清方案等，都是一個個的外掛。

安裝方法：

    用 npm 安裝 umi ：

$ npm i umi -g

   或者用 yarn ：

$ yarn global add umi
 

    然後可以 umi -v 檢查版本號：

$ umi -v
[email protected]

建立應用：

建立應用並進入。

$ mkdir myapp
$ cd myapp

$ umi dev

Compiled successfully!

You can now view Your App in the browser.

  Local:            http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.
 

建立我們第一個umi頁面：

在 pages 目錄裡新建首頁。

$ echo 'export default () => <div>Index Page</div>' > pages/index.js

如果你是 Window 系統，可以手動新建 pages/index.js，並填入：

export default () => <div>Index Page</div>;

然後在瀏覽器中開啟 http://localhost:8000/，你會看到 Index Page 。

構建應用：

$ umi build

Compiled successfully.

File sizes after gzip:

  52.09 KB  static/umi.2b7e5e82.js
  186 B     static/__common-umi.6a75ebe1.async.js

構建產物會生成在 dist 目錄：

$ tree ./dist

dist
├── index.html
└── static
    ├── __common-umi.6a75ebe1.async.js
    └── umi.2b7e5e82.js

1 directory, 3 files

部署：

$ npm i serve -g
$ cd dist
$ serve

Serving!

- Local:            http://localhost:5000   
- On Your Network:  http://{Your IP}:5000

Copied local address to clipboard!

這樣UmiJS就可以算是上手了。

我們來看一下umi的目錄結構：

一定要記得pages目錄是強約定目錄哦。

小夥伴，有什麼要說的呢？談一下，大家對支付寶這套新出框架“五米”的感想吧？