首先查看官网,了解其特性和快速上手
https://umijs.org/zh/guide/create-umi-app.html
接下来讲一下我使用的流程
1、创建umi项目
$ mkdir myapp && cd myapp
$ yarn create umi 或者 npm create umi
WX20190121-111140.png
选择对应的需要的框架,回车就初始化好了项目
然后安装依赖
yarn 或者 npm install
最后运行
yarn start 或者 npm start
2、创建路由页面
umi g page index 对应的路由是 /index
//使用umi的路由
import Link from 'umi/link';
export default () => {
<div>
/* 普通使用 */
<Link to="/list">Go to list page</Link>
/* 带参数 */
<Link to="/list?a=b">Go to list page</Link>
/* 包含子组件 */
<Link to="/list?a=b"><button>Go to list page</button></Link>
</div>
}
//使用命令跳转
// 普通跳转,不带参数
router.push('/list');
// 带参数
router.push('/list?a=b');
router.push({
pathname: '/list',
query: {
a: 'b',
},
});
3、配置权限路由(通过注释扩展路由)
/**
* title: Index Page
* Routes:
* - ./src/routes/PrivateRoute.js
*
*/
重新运行之后,会看到.umi/router.js里面会多出来一段
WX20190121-112859.png
PrivateRoute.js里面的代码:
WX20190121-113229.png
这样最简单的一个需求就能满足了,下面是对umi进行配置
#配置文件
umi 允许在 .umirc.js
或 config/config.js
(二选一,.umirc.js
优先)中进行配置,支持 ES6 语法。
https://umijs.org/zh/config/#theme
使用umi配置px转rem
这个配置没有忽略node_modules里面的css文件,导致ant里面的css会被转成rem,这个问题展示没有找到解决方法,不过可以引用antd.less文件,可以暂时解决这个问题
//下载 lib-flexible px2rem-loader
chainWebpack(config, { webpack }) {
config.module
.rule('postcss')
.test(/\.css$/)
.use('postcss-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 75, remPrecision: 8 });
}
config.merge({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}},
});
umi打包之后解决文件缓存问题
config.output.filename(`[name].${Date.now()}.js`).end();
网友评论