首先要明确一个问题. 不管是 antd 还是 dva 还是别的什么东西,他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的. 所以第一步应该是 .umirc.js (config.js) 的配置. // ref: https://umijs.org/config/ export default { treeShaking: true, routes: [ { path: '/', component: '../layouts/index', routes: [ { path:

1.UMI提供了可视化antd模板,可以直接添加到项目中修改用 比如将个人中心添加到项目中 2.选择个人中心,确定 3.成功 4.打开项目 5.Route文件也自动添加 根路由有exact:true后面要把工作台移到mainfrm路由中 6.运行报错 7.安装 8.找不到style.less 安装less模块npm install --save-dev less-loader less type.d.ts增加 declare module '*.css'; declare module "*.p

最近跟着Antd-Pro官方教程学习umi,这里给大家推荐一下这个教程,特别适合初学者学习,教程涉及了AntD,AntD-Pro,umiJS,dvaJS等框架知识. 学习过程中跟着教程做了个Demo,下面贴出主要代码 export default { // 用来表示项目文件夹(page,model等)是否为单数,默认为复数 singular: true, // 选择插件,这里是一个数组,一个插件是一个项,当项需要有别的参数的时候,这个项为一个数组,且这个数组第二个项是参数. plugins: [

目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(React)学习-13 Warning XX should not be prefixed with namespace XXX AntDesign(React)学习-12 使用Table AntDesign(React)学习-11 使用mobx AntDesign(React)学习-10 Dva 与后台数

[前言] 找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/index-cn 该套模板是使用了React开发框架作为基础,AntDesign(蚂蚁金服开源UI组件库)作为UI库,集成了Dva,Umi,Mock等库,如果不是很了解这些内容,门槛还是比较高的. 我们今天需要实现一个需求:将Antd Pro模板中固定写死的菜单换成从服务器请

本文会分享一个我在实际工作中遇到的案例,从最开始的需求分析到项目搭建,以及最后落地的架构的整个过程.最终实现的效果是使用mono-repo实现了跨项目的组件共享.在本文中你可以看到: 从接到需求到深入分析并构建架构的整个思考过程. mono-repo的简单介绍. mono-repo适用的场景分析. 产出一个可以跨项目共享组件的项目架构. 本文产出的架构模板已经上传到GitHub,如果你刚好需要一个mono-repo + react的模板,直接clone下来吧:https://github.com

官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html 改编效果: 实现步骤: 环境:nodejs.yarn/npm.umi(最新即可) 创建项目: 1.打开cmd 2.创建项目文件夹:输入mkdir ReactUmiG6App & cd ReactUmiG6App 回车 3.创建项目:yarn create umi   4.添加需要的依赖包:react .antd.@antv/g6 yarn add ant

一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入Antd组件 在控制台输入命令:yarn add antd 3.安装依赖 在控制台输入命令:yarn 4.启动项目 yarn start 二.项目目录与配置文件介绍 1.项目目录结构截图: 2.主要核心代码目录:/page 3.umi配置文件:.umirc.ts (官方文档:https://umijs.

Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架. Umi 一套可插拔的企业级 react 应用框架,同样由dva作者 sorrycc 完成.他在Umi中引入了 UI 工具 antd,打包工具 roadhog,路由 react-router和状态管理器 dva,做到了可插拔机制. Dva 初实践 一

记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: Dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”.现在已经有了自己的官网 https://dvajs.com: Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架

先创建一个新项目,具体步骤请参考https://www.cnblogs.com/darkbluelove/p/11338309.html 一.添加document.ejs文件(参考文档:https://umijs.org/zh/guide/app-structure.html#src-pages-document-ejs)在pages文件夹下创建document.ejs文件,有这个文件时,会覆盖默认的 HTML 模板.模板里需至少包含根节点的 HTML 信息  <div id="root&

首先全局安装dva+umiumi:npm install -g umidva:npm install -g dva-cli 通过脚手架创建项目 一: mkdir myapp && cd myapp 二: npm create umi 三: ? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate,

首先全局安装dva+umiumi:npm install -g umidva:npm install -g dva-cli 通过脚手架创建项目 一: mkdir myapp && cd myapp 二: npm create umi 三: ? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate,

先创建一个新项目,具体步骤请参考https://www.cnblogs.com/darkbluelove/p/11338309.html 一.添加document.ejs文件(参考文档:https://umijs.org/zh/guide/app-structure.html#src-pages-document-ejs)在pages文件夹下创建document.ejs文件,有这个文件时,会覆盖默认的 HTML 模板.模板里需至少包含根节点的 HTML 信息  <div id="root&

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 these? 1.1 react.js React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库.使用 React 可以将一些简短.独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”. 1.2 dva dva 首先是一个基于 redux 和 redux-saga 

umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架,是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java.node.H5 无线.离线(Hybrid)应用.纯前端 assets 应用.CMS 应用等.(具体可前往Umijs官网进行查看https://umijs.org/) dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻

介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会在基于umi的基础上,开发出一个框架通用功能和业务功能 框架功能列表 全局layout 权限管理 封装列表增删改查 国际化 集成 g2 chart图表 集成 socket.io ....(后续补充) 业务功能 用户管理 ....(后续补充) 创建项目 umi 提供了脚手架供我们快速创建项目.参考um

前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧. html/css/js 这里推荐大家去w3cschool稍作了解,不过看本篇文章的同学肯定都是有一定基础的.那么就当做巩固好了. es6 这里我没有系统看过教程,我是在一本叫做react学习手册的书上面看到的.这里还是放一

概念 // http://localhost:3000/ //models import IndexPage from './routes/IndexPage'; import Products from './routes/Products'; //Router Component function RouterConfig({ history }) { return ( <Router history={history}> <Switch> <Route path=&qu