我们知道umi 是一个编译工具,但它同时也是一个前端框架。它对社区的 webpack,react-router 等进行的封装,
使得我们可以基于它快速搭建一个 React 项目。
第一步:安装umi

第二步:创建目录,并写入配置


在 umi 中,约定的存放页面代码的文件夹是 pages,是复数,不过我们可以添加 singular 为 true 来让 page 变为约定的文件夹。
接下来让我们创建第一个页面组件

这样第一个页面就创建完成了。
接下来我们就可以通过 umi 来启动代码了。
首先需要在 package.json 中的 scripts 里面添加两个命令。

第三步:运行项目


如果我们要自己配置路由,我们会怎么配置呢?

再运行项目我们就可以看到

当有了 routes 的配置之后 umi 就不会再执行约定式对应的路由逻辑了,而是通过配置声明的路由。
第四步:添加 umi-plugin-react 插件
umi 是一个可插拔的企业级 react 应用框架,它的很多功能都是通过插件实现。尤其是 umi 官方的 umi-plugin-react 这个插件
集成了常用的一些进阶的功能。
首先通过 cnpm install umi-plugin-react --save-dev 来安装该插件集。然后在配置文件 config/config.js 中引入该插件:

第五步:构建和部署
我们可以通过来构建和部署项目。
我们可以看到增加了一个dist目录

我们可以继续发散一下子,如果我们在项目里面定义一个父子组件,又该怎么样进行demo呢?

再定义一个子组件ShoppingList


最后看我们的运行结果

详细demo可以见我的github:https://github.com/JserJser/reactWebApp/tree/master/antd-course
本文借鉴自博客:https://www.yuque.com/ant-design/course

react与umi的更多相关文章

  1. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  2. 写一个umi插件 自动生成代码 解放cv的双手

    引言 最近在写一个中台项目,使用的react的umi框架. 各种增删改查.基本是列表页 新建页 详情页这种页面 为了避免不必要的简单重复(主要是想偷懒) 于是想去实现自己的一个代码生成器 探索 首先, ...

  3. 01 基于umi搭建React快速开发框架

    介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...

  4. react框架 Dva & Umi

    概念 // http://localhost:3000/ //models import IndexPage from './routes/IndexPage'; import Products fr ...

  5. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  6. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  7. react+umi+netcore+signalR BS和客户端设备 简单通讯

    微信扫码登录工作用 仅作记录 扫码访问服务器地址 实现扫码服务器地址通讯中断设备解锁 采用signalR 双向异步通知中断 创建控制器 ChatController 注入集线器上下文 IHubCont ...

  8. react+dva+antd+umi项目建立操作流程及知识点总结

    0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...

  9. AntDesign(React)学习-14 使用UMI提供的antd模板

    1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后 ...

随机推荐

  1. NuGet 使用笔记

    环境准备 1. 下载nuget : https://www.nuget.org/downloads 2. 设置到环境变量Path, 使生效:在Cmd打入: set path=abc  关闭Cmd (C ...

  2. cometd简单用例

    准备工作 整个例子的源码下载:http://pan.baidu.com/s/1gfFYSbp 下载服务端jar文件 Comet4J目前仅支持Tomcat6.7版本,根据您所使用的Tomcat版本下载[ ...

  3. 结对项目gobang

    题目介绍:实现五子棋的基本规则,分黑棋和白棋.连成5个的胜利,完成了五子棋的单人游戏. 代码地址:https://github.com/liuxianchen/gobang 结对人:刘仙臣  康佳 结 ...

  4. 读后感for《一个程序员的生命周期》

    我是村里走出来的孩子,妈妈说我也许是家里唯一一个大学生了,家里从选专业开始也赋予我厚望.说实话,上大学是父母经济压力最大的时候.心疼,大概就是早上六七点起床,看到爸爸一夜没睡,带着倦容眼睛红红的还在工 ...

  5. 第三个spring冲刺第2天

    今天我们有了计时功能的实现,并且在考虑如何使得计时器美观好看达到我们的要求,对此我们换了不同的背景,时钟框,效果还有待查看.

  6. Why yarn

    http://www.cnblogs.com/LeftNotEasy/archive/2012/02/18/why-yarn.html https://www.ibm.com/developerwor ...

  7. doc.update

    db.collection('todos').doc('todo-identifiant-aleatoire').update({ // data 传入需要局部更新的数据 data: { // 表示将 ...

  8. ubuntu更改分辨率

    1. 输入:$cvt 1920 1080 2 输入: $xrandr 3 输入: $sudo xrandr --newmode "1920x1080_60.00" 173.00 1 ...

  9. Lodop打印二维码内容长度不同如何大小相同

    利用Loodop打印控件打印二维码的时候,往往传入的数值是变量,有的只有一个数字,有的却一大堆数字和字母,根据内容长度不同,二维码大小也不同,这样如果批量打印二维码标签,传入的数据是不同的,会造成有的 ...

  10. caffe实现多任务学习

    Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs  1. 采用多label的lmdb+Slice L ...