環(huán)境準(zhǔn)備
- 首先得有node，并且確保node版本是8.10或以上评汰。
node -v //查看node版本
8.1x
- 安裝全局umi读拆，并確保版本是2.0.0或以上。
yarn global add umi //安裝全局umi
umi -v //查看umi版本
腳手架
- 首先建一個(gè)空目錄
mkdir myapp //創(chuàng)建一個(gè)名為myapp的新目錄
- 然后進(jìn)入該目錄
cd myapp //切換到myapp目錄下
可簡(jiǎn)寫成：
mkdir myapp && cd myapp
- 然后通過(guò)umi g創(chuàng)建一些頁(yè)面纸镊。
umi g 是 umi generate 的別名倍阐，可用于快速生成 component、page逗威、layout 等峰搪，并且可在插件里被擴(kuò)展，比如 umi-plugin-dva 里擴(kuò)展了 dva:model凯旭，然后就可以通過(guò) umi g dva:model foo 快速 dva 的 model概耻。
umi g page index //創(chuàng)建一個(gè)以page為目錄的index.js文件
umi g page users//創(chuàng)建一個(gè)以page為目錄的users.js文件
- 然后啟動(dòng)本地服務(wù)，會(huì)在瀏覽器看到上面兩個(gè)頁(yè)面的內(nèi)容
umi dev
約定式路由
啟動(dòng) umi dev 后罐呼，大家會(huì)發(fā)現(xiàn) pages 下多了個(gè) .umi 的目錄鞠柄。這是啥？這是 umi 的臨時(shí)目錄嫉柴，可以在這里做一些驗(yàn)證厌杜，但請(qǐng)不要直接在這里修改代碼，umi 重啟或者 pages 下的文件修改都會(huì)重新生成這個(gè)文件夾下的文件计螺。
然后我們?cè)?index 和 users 直接加一些路由跳轉(zhuǎn)邏輯夯尽。
先修改pages/index.js，
+ import Link from 'umi/link';
import styles from './index.css';
export default function() {
return (
<div className={styles.normal}>
<h1>Page index</h1>
+ <Link to="/users">go to /users</Link>
</div>
);
}
再修改 pages/users.js登馒，
+ import router from 'umi/router';
import styles from './index.css';
export default function() {
return (
<div className={styles.normal}>
<h1>Page index</h1>
+ <button onClick={() => { router.goBack(); }}>go back</button>
</div>
);
}
然后瀏覽器驗(yàn)證匙握， index 和 users 兩個(gè)頁(yè)面之間通過(guò)路由跳轉(zhuǎn)了。
部署發(fā)布
umi build //構(gòu)建產(chǎn)物默認(rèn)生成到 ./dist 下
本地驗(yàn)證
發(fā)布之前陈轿，可以通過(guò) serve 做本地驗(yàn)證圈纺，
yarn global add serve //添加全局server
serve ./dist
可以在瀏覽器訪問(wèn)生成的地址，里面的內(nèi)容和umi dev構(gòu)建生成的內(nèi)容一樣济欢。
部署
本地驗(yàn)證完赠堵，就可以部署了，這里通過(guò) now 來(lái)做演示法褥。
yarn global add now //添加全局now
now ./dist
