Umijs组件的初次应用

在Umijs组件中我们不像vue那样可以看到组件的路径，在umijs刚刚搭建完成我们看不到组件的路径，所以我们要手动进行一些小小的改动，就可以看到了

一，应用前的准备

1、在当前项目文件路径下的终端输入 npm umi g page login posts/post posts/create命令

会实现在pages文件目录下添加login的相关两个文件，在posts文件目录下添加post和create的相关文件

2.找到umirc.ts,在里边添加routes里也有组件的path和compoment(path就是路由路径，compoment就是指定路由组件）注意，在指定路由组件的时候，路径默认是从pages文件夹下

export default {npmClient: 'npm',routers:[ {path:'/',component:'./index'},{path:'docs',component:'./docs'},{path:'/posts/create',component:'./posts/create'},{path:'/login',component:'./login'},{path:'posts/:postId',component:'./posts/post'}]
};

这样我们就把组件添加到了这个项目中，我们运行发现在界面看不到，这是由于我们主页并没有设置跳转到我们新添加的组件的链接

3.在src目录下找到laytous中的index.tsx就是我们的首页配置，运用Link命令（组件式）进行链接

  <li><Link to='/login'>login</Link></li>

我们的组件就添加好了

4.我们同样可以使用history的方法来进行页面的跳转，但是需要注意的是，我们如果使用history（命令式）的话，需要先引入history，Link方法其实也需要引入，只是默认已经引入了

import { history } from 'umi';

然后我们就可以使用history的方法了（history.push(),history.back,history.go()）例如用history.push方法实现登陆界面的跳转

import { Link, Outlet } from 'umi';
import { history } from 'umi';
import styles from './index.less';
function login(){history.push('/login');
}
export default function Layout() {return (<div className={styles.navs}><ul><li><Link to="/">Home</Link></li><li><Link to="/docs">Docs</Link></li><li><button onClick={login}>登录</button></li><li><a href="https://github.com/umijs/umi">Github</a></li></ul><Outlet /></div>);
}

接下来我们就可以愉快的玩耍Umi里的组件了

Umijs组件的初次应用相关推荐

react 组件连动效果_记一个缓动水柱React动画组件的初次尝试
写完意识到这是第一篇,算是前言吧... 以后在zhihu写点东西...就当是博客好了,个人观点和体会而已,不求高大上,但求回头看的时候能够让以后的自己瞧不起. 背景:写React也一年多了,从一开始的 ...
龙芯1b（LS1B200）使用LVGL7.0.1组件的初次体验
由比赛入坑龙芯1b(LS1B200),需要对板上驱动进行开发,使用LVGL库来做UI界面控制驱动. 网上资料难以查找,在本文中记录学习. 实现效果: 使用LVGL库的基本步骤: 1.硬件和需求设置LV ...
[react] React组件的构造函数有什么作用？
[react] React组件的构造函数有什么作用? 在react的新的写法中,每一个组件都是一个类,这个很符合es6的语法规范,在es6中要想创建一个对象,就要调用相应的构造函数, react的组件 ...
为什么react选择了函数式组件（剖析原理）
不好意思,这是知乎上我写的文章,就不再csdn发布了.如果需要阅读,请点击: 为什么react选择了函数式组件(剖析原理) 最近,发现知乎的连接出问题了,所以,暂时把内容放在此处.如果知乎上好了的话, ...
Vue_VueRouter
简介 Vue和vue-router 创建 SPA 应用. vue-router 作用. 通过路由规则,渲染各自的组件. Vue开发,整个应用已经被拆分成了独立的组件.在使用vue-router时,把路 ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了. 那么我们怎么在vue中实现这个换皮肤的功能呢? 实现思路我们用vue一般都是写 ...
【Vue2.0】黑马课程笔记（一）基本指令和过滤器
目录 1 了解 1.1 为什么要学习流行框架? 1.2 框架和库的区别 1.3 Node(后端)中的 MVC 与前端中的 MVVM 之间的区别 1.4 Vue 扩展插件 2 Vue简介 2.1 vu ...
vue2[黑马程序员]
一.前端工程化与webpack 1.前端工程化 1. 小白眼中的前端开发 vs 实际的前端开发 2. 什么是前端工程化 3. 前端工程化的解决方案 2.webpack的基本使用 1. 什么是 webp ...
【vue基础】黑马vue视频笔记（二）
文章目录一.过滤器(vue2) (1)Filters过滤器概念 (2)定义过滤器 (3)私有过滤器和全局过滤器 (4)其他 (5)过滤器的注意点二.watch 侦听器 (1)什么是侦听器 (2)侦 ...

Umijs组件的初次应用

Umijs组件的初次应用相关推荐

最新文章

热门文章