UmiJS介绍--快速上⼿（⼀）
1.介绍
umi是⼀个可插拔的企业级react应⽤框架。umi以路由为基础的，⽀持类next.js的约定式路由，以及各种进阶的路由功能
umi配以完善的插件体系，覆盖从源码到构建产物的每个⽣命周期
umi是蚂蚁⾦服的底层前端框架
umi 可以简单地理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以⼀套插件机制，⽬的是通过框架的⽅式简化 React 开发2.特性
1.开箱即⽤：内置react、react-router等
2.类next.js且功能完备的路由约定，同时⽀持配置的路由⽅式
3.完善的插件体系，覆盖从源码到构建产物的每个⽣命周期
4.⾼性能，通过插件⽀持PWA(渐进式WEB应⽤)、以路由为单位的code splitting等
5.⽀持静态页⾯导出，适配各种环境
6.开发启动快，⽀持⼀点开启dll和hard-source-webpack-plugin等
7.⼀键兼容到IE9，基于umi-plugin-polyfills
8.完善的TypeScript⽀持，包括d.ts定义和umi testreact开发框架
9，与dva的数据流的深⼊融合，⽀持duck directory、model的⾃动加载、code splitting等等
3.快速上⼿
1.下载，并且版本是8.10或以上
2.推荐使⽤yarn管理npm依赖，并使⽤国内源
//国内源
npm i yarn tyarn -g
//阿⾥内⽹源
tnpm i yarn @alipay/yarn -g
3.全局安装umi，版本是2.0.0或以上
yarn global add umi
4.脚⼿架
创建页⾯
mkdir myapp && cd myapp
umi g page index
umi g page users
umi g 是 umi generate 的别名，可⽤于快速⽣成 component、page、layout 等，并且可在插件⾥被扩展，⽐如 umi-plugin-dva ⾥扩展了 dva:model，然后就可以通过 umi g dva:model foo 快速 dva 的 model。
创建后pages⽬录如下
── pages
├── index.css
├── index.js
├── users.css
└── users.js
5.启动本地服务器
umi dev
6.约定式路由
启动umi dev后，pages下多个.umi的⽬录。这是 umi 的临时⽬录，可以在这⾥做⼀些验证，但请不要直接在这⾥修改代码我们在 index 和 users 直接加⼀些路由跳转逻辑
先修改 pages/index.js，
+ import Link from 'umi/link';
import styles from './index.css';
export default function() {
return (
<div className={al}>
<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={al}>
<h1>Page index</h1>
+    <button onClick={() => { Back(); }}>go back</button>
</div>
);
}
然后浏览器验证，应该已经可以在 index 和 users 两个页⾯之间通过路由跳转了。
7.部署发布
执⾏umi build，构建产物默认⽣成到 ./dist 下
通过 serve 做本地验证，正常情况下应该是和 umi dev ⼀致的
8.部署
本地验证完，就可以部署了，这⾥通过 now 来做演⽰
yarn global add now
now ./dist

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。