跟著umi的官方教程一步一步來(lái)赛糟。
$ yarn global add umi //全局安裝umi
$ mkdir myapp && cd myapp //新建一個(gè)項(xiàng)目目錄
$ umi g page index
$ umi g page users //新建一些頁(yè)面埃叭，umi g 是 umi generate 的別名摸恍，可用于快速生成 component、page赤屋、layout 等
$ tree //查看目錄
.
└── pages
├── index.css
├── index.js
├── users.css
└── users.js
pages 目錄是頁(yè)面所在的目錄立镶，umi 里約定默認(rèn)情況下 pages 下所有的 js 文件即路由。
$ umi dev //啟動(dòng)本地服務(wù)器
通過(guò)腳手架安裝
shell
yarn create umi //安裝umi腳手架
success Installed "create-umi@0.14.0" with binaries:
- create-umi
? Select the boilerplate type
? Select the boilerplate type app //單獨(dú)項(xiàng)目
? Do you want to use typescript? No
? What functionality do you want to enable? antd, dva, internationalization
選裝的插件:antd-組件类早，dva-狀態(tài)管理媚媒，internationalization-國(guó)際化
之后使用yarn安裝依賴，大致的目錄結(jié)構(gòu)如下
.
├── dist/ // 默認(rèn)的 build 輸出目錄
├── mock/ // mock 文件所在目錄涩僻，基于 express
├── config/
├── config.js // umi 配置缭召，同 .umirc.js，二選一
└── src/ // 源碼目錄逆日，可選
├── layouts/index.js // 全局布局
├── pages/ // 頁(yè)面目錄恼琼，里面的文件即路由
├── .umi/ // dev 臨時(shí)目錄，需添加到 .gitignore
├── .umi-production/ // build 臨時(shí)目錄屏富，會(huì)自動(dòng)刪除
├── document.ejs // HTML 模板
├── 404.js // 404 頁(yè)面
├── page1.js // 頁(yè)面 1，任意命名蛙卤，導(dǎo)出 react 組件
├── page1.test.js // 用例文件狠半，umi test 會(huì)匹配所有 .test.js 和 .e2e.js 結(jié)尾的文件
└── page2.js // 頁(yè)面 2噩死，任意命名
├── global.css // 約定的全局樣式文件，自動(dòng)引入神年，也可以用 global.less
├── global.js // 可以在這里加入 polyfill
├── app.js // 運(yùn)行時(shí)配置文件
├── .umirc.js // umi 配置已维，同 config/config.js，二選一
├── .env // 環(huán)境變量
└── package.json
未完
