说起来如果是做react项目不一定非得选react官方脚手架,umi框架也是很好的选择;相对于react官方脚手架来来说;更加的简单
好用;我们都知道官方脚手架有高低板之分;而且呢还非常麻烦就对于配置路由来说;虽然高板比低版本的要稍微简单一点;但是如果你想选择更见得方式那就是umi了;先简单介绍一下umi,就是基于react开发的一款框架,可以说是把react摸得很通透;它里面呢是采用约定式路由的规则。只要你遵守了规则就很简单很随意的使用;下面来看一下umi的用法;
巫米;
自己随手建个项目;然后在该项目里建个src文件夹;src文件夹在终端中打开;
全局安装一次umi 打开终端执行 npm i -g umi
执行 umi g page index //创建组件并自己生成css样式文件;
完成后会有一个pages文件夹;一个index。js和一个index。css;即创建完成;
//在这个框架里面你完全不用配置路由,所有的;路由它自己给你生成,当然文件是隐藏的你看不到;你也不用管;
运行到浏览器就是umi dev
那么需要用到嵌套怎么办?
这个不用担心;react中怎么用这里就怎么用;你可以使用组件套组件标签的方式;
如果需要传参;那就在pages文件夹下再建个文件夹;比如传参到detail文件下;那就建个detail文件夹;从pages文件夹中取出相应的组件和css样式;
如果是params传参;那么接受参数的该组件要改名为$id.js
无状态组件内部通过props.match.params.id来接收;代码如下:
export default function(props) {
return (
<div className={styles.normal}>
<h1>Page list</h1>
<p>{props.match.params.id}</p>
</div>
);
}
无状态组件内部如果通过query、传参;那么首先:
<Link to={{pathname:'/list',query:{id:'hello query'}}}>list</Link>
然后同样是新建文件夹跟上面是一样的;只不过不是$id文件名了;而是index.js代码如下:
export default function(props){
return(
<div>
<h2>querychuancan</h2>
<h2>{props.location.query.id}</h2>
</div>
)
}
还有一种state传参,就只是把query替换为state仅此而已;啥都不用变;
关于嵌套;我们在传参的文件夹里面建个_layout.js;在这里面的代码如下:export default function (props){
return(
<div>
<h2>外城布局容器</h2>
<div>{props.children}</div>
</div>
)
}
如果有这个文件,那么我们的传值路劲会优先加载这个页面;要想在这里面嵌套显示;那么就只能给个容器:方式:<div>{props.children}</div>
如何声明全局样式?
只需要在pages下建个global.css文件:这里面样式为公共样式;任何组件无需引用;符合的都能生效;
配置文件?去官网拿;
export default {
plugins: [
// 有参数
[
'umi-plugin-react',
{
dva: true,
antd: true,
},
],
'./plugin',
],
};
写入你需要用的第三方插件;后方跟个true即可;
例如以上的dva和antd;dva是状态管理;而antd是react的一款pc端的ui框架;
需要配置的很少;只需要安装下面的依赖 npm i umi-plugin-react --save-dev