目录:

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 与后台数据交互

AntDesign(React)学习-9 Dva model reducer实践

AntDesign(React)学习-8 Menu使用 切换框架页内容页面

AntDesign(React)学习-7 Menu添加事件

AntDesign(React)学习-6 Menu展示数据

AntDesign(React)学习-5 路由及使用Layout布局

AntDesign(React)学习-4 登录页面提交数据简单实现

AntDesign(React)学习-3 React基础

AntDesign(React)学习-2 第一个页面

AntDesign(React)学习-1 创建环境

UMI不等同AntDesign(React),但是使用UMI可以减少一些配置工作量,下面笔记主要记录基于UMI环境学习,另外中间夹杂着一些基础技术。

关于UMI的说明引自百科:umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。

之前研究过一段时间AntDesign(Vue)版本的,感觉网上资料太少,BUG挺多,可能AntDesign(Vue)当时新出的问题比较多,最近要研究SpringBoot,借此机会从新点开React技术分支(从0开始)。后端SpingBoot学习

还是一步一步记录配置过程

1、安装umi

2、提示我node版本太低,去官网下载最新版本安装

http://nodejs.cn/download/

3、重新yarn create umi,一路回车

4、使用最新版本

windows下的 git的控制台有点乱码,使用windows cmd没有这个问题。

5、yarn install

6、提示一个错误

Error: EBUSY: resource busy or locked, symlink

关掉杀毒软件重试才成功

7、Building Refresh Packages一直停留

yarn.rc增加一条指令

puppeteer_skip_chromium_download true

或者

registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver" 8、yarn start 启动
可以进入项目进行一些配置
http://localhost:3000/configuration
运行效果如下,以后创建的项目统一使用TypeScript
 

AntDesign(React)学习-1 创建环境的更多相关文章

  1. AntDesign(React)学习-4 登录页面提交数据简单实现

    github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...

  2. AntDesign(React)学习-2 第一个页面

    1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...

  3. AntDesign(React)学习-12 使用Table

    AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...

  4. AntDesign(React)学习-9 Dva model reducer实践

    今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...

  5. AntDesign(React)学习-5 路由及使用Layout布局

    前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. AntDesign(React)学习-10 Dva 与后台数据交互

    明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...

  8. AntDesign(React)学习-8 Menu使用 切换框架页内容页面

    本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...

  9. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

随机推荐

  1. Openshift V3系列各组件版本

    Openshift V3.* 系列各组件版本 Components 3.0 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.9 3.10 3.11 Core Components dock ...

  2. MySQL概述及入门(四)

    MySql概述及入门(四) 什么是MySQL的锁? 数据库锁定机制,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则,简单说,就是不让别人动 总的来说,MySQL各 ...

  3. echarts--可拖动的曲线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 搭建wordpress博客

    环境说明 操作系统: CentOS 7.2 64位 1. 准备LAMP环境 LNMP 是 Linux.Nginx.MySQL 和 PHP 的缩写,是 WordPress 博客系统依赖的基础运行环境.我 ...

  5. linux版本的jdk1.8+hadoop2.9.2下载地址

    hadoop: 链接:https://pan.baidu.com/s/14AhhPYP8933tn-EfSX-i8Q 提取码:e90m jdk1.8: 链接:https://pan.baidu.com ...

  6. linq行转列

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...

  7. CodingPlus Blog Update Info

    CodingPlus更新啦! 我就是记录一下!您想知道现在的博客是第几代的吗?您想知道CodingPlus博客的发展历程吗?来,让我们一起看看! V3.5 最新版了! V3.5.0 很多人看到自然觉得 ...

  8. Sublime text3 最新版破解,永久有效

    下载sublimeText3的安装包并安装(已经安装的可以忽略) 在hosts文件中添加:127.0.0.1    license.sublimehq.com(hosts文件地址:C:\Windows ...

  9. Spark学习之路 (九)SparkCore的调优之数据倾斜调优[转]

    调优概述 有的时候,我们可能会遇到大数据计算中一个最棘手的问题--数据倾斜,此时Spark作业的性能会比期望差很多.数据倾斜调优,就是使用各种技术方案解决不同类型的数据倾斜问题,以保证Spark作业的 ...

  10. 剑指offer-面试题19-正则表达式匹配-字符串

    /* 题目: 实现一个函数用来匹配包含'.'和'*'的正则表达式. '.'表示比配任意字符,‘*’表示匹配0个或多个字符串. */ /* 思路: 采用递归的方法. 基础条件:当字符串和模式串存在空的情 ...