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 创建环境的更多相关文章

AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
AntDesign(React)学习-2 第一个页面
1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...
AntDesign(React)学习-12 使用Table
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...
AntDesign(React)学习-9 Dva model reducer实践
今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...
AntDesign(React)学习-5 路由及使用Layout布局
前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...
AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
AntDesign(React)学习-10 Dva 与后台数据交互
明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录创建文件userSr ...
AntDesign(React)学习-8 Menu使用切换框架页内容页面
本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...
AntDesign(React)学习-15 组件定义、connect、interface
虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

随机推荐

deepin系统修改IP地址记录
今天在配置软路由的时候需要设备有线网卡为静态地址,于是便按照如下方法进行修改: 1.备份网络配置文件: sudo cp /etc/network/interfaces /etc/netword/int ...
关于在Spring项目中使用thymeleaf报Exception parsing document错误
今天在使用SpringBoot的过程中,SpringBoot版本为1.5.18.RELEASE,访问thymeleaf引擎的html页面报错Exception parsing document: 这是 ...
external IP 和 local IP 的区别
外部(external)和本地(local) IP地址都具有相同的用途,不同之处在于范围.整个Internet使用外部或公共IP地址来定位计算机系统和设备.专用网络内部使用本地或内部IP地址来定位与其 ...
Linux ps和pstree命令
1. 查看所有进程 ps -eF -e: Select all processes.-F: Extra full format. PSR (Processor)显示进程所在的CPU. 2. 查看所有进 ...
Git 尝试
1,下载Git 2,安装GIt 3,config : git config --global user.name "mxb" git config --global user.em ...
《茶余饭后小故事》MV*、MVC、MVP、MVVM的前世今生
今天我们讲讲历史,讲讲故事,不扯高深术语. MV*表示的意思是:M(Model逻辑层) + View(视图层) + *(中间者).上帝提出了这个逻辑与视图分离,用中间者进行连接的伟大思想,并将实现这个 ...
【笔记】机器学习 - 李宏毅 - 9 - Keras Demo
3.1 configuration 3.2 寻找最优网络参数代码示例: # 1.Step 1 model = Sequential() model.add(Dense(input_dim=28*28 ...
webservice之Http传输错误问题
1.背景:调用第三方webservice服务,正常调用,但是最近由于第三方更换远程调用地址,并且发布服务器(A)是通过代理的方式请求真实服务器地址(B),于是本以为很简单的将客户端调用地址修改为发布地 ...
C#实例之简单聊天室（状态管理）
前言状态管理是在同一页或不同页的多个请求发生时,维护状态和页信息的过程.因为Web应用程序的通信协议使用了无状态的HTTP协议,所以当客户端请求页面时,ASP.NET服务器端都会重新生 ...
Hadoop学习之路(9)ZooKeeper安装
文章目录 1.环境准备 1.1下载zooKeeper 1.3安装zooKeeper 1.4配置zooKeeper环境变量 1.5 修改zookeeper集群配置文件 1.6 创建myid文件 1.7 ...

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

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

随机推荐

热门专题