JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")
版本:【 "JYadmin-react-antd": "^1.0.0"】
版权所有:微信公众号【微新悦】文章说明:本课题会带大家从零到一打造一套基于react+antd封装的优秀后台模板集成方案
第一节:【react+antd 基础框架搭建(登录)】
第一步:使用create-react-app脚手架创建一个项目
create-react-app my-project
第二步:修改端口号
"start": "set PORT=9000 && react-scripts start"
说明:
在根目录【package.json】的【scripts】对象里修改【start】为上述命令
第三步:配置@符号-资源路径指向
(1)、执行 npm run eject(2)、在config/webpack.config.js文件的alias中插入代码(3)、'@': path.resolve('src')
说明:运行npm run eject此命令会把 react-scripts 封装的一些webpack配置等全部解压到项目目录,项目结构中
第四步(1):配置路由模块
cnpm install --save react-router react-router-dom
第四步(2):修改根目录App.js代码

ui效果:如下图

第五步:编写后台管理系统登录页(ES6 class 来定义一个组件)
第五步(1)、class组件基本构成
第五步(2)、引入antd 按需加载
cnpm install --save antd
cnpm i babel-plugin-import -D
交互效果:如下视频
1、css使用行内元素 js文件配置
2、使用antd form表单以及实现表单输入校验
JYadmin-react-antd react+antd封装的优秀后台模板集成方案("^1.0.0")的更多相关文章
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...
- react + react-router + less +antd 开发环境
react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目. 2.进入项目目录,首先 npm r ...
- easy canvas shape with react antdesign 简单的canvas图形in antd & react
//show: //code: import React from "react" import {findDOMNode} from 'react-dom' import { B ...
- 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战
一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- antd+react项目迁移vite的解决方案
antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...
- react中自定义antd主题与支持less(第二部)
自定义主题 首先自定义主题需要修改antd,antd本身也是less写的之后编译成css的,所以当我们需要使用less. 1.yarn add react-app-rewire-less --dev ...
- Mock平台3-初识Antd React 开箱即用中台前端框架
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 内容提要 首先说下为啥这次测试开发系列教程前端选择Antd React,其实也是纠结对比过最终决定挑战一把,想法大概有几下几点: 笔者自己 ...
- 从0开始用webpack开发antd,react组件库npm包并发布
一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...
随机推荐
- 下载器Folx的创建种子功能怎么使用
当我们想要分享一些自己制作的资源时,可以使用Folx的创建种子功能,在网络上分享种子,供他人下载,这个过程也被称为做种.作为种子创建者,需要在一定时间内保持做种进程,以便维持种子的生命期限,方便他人下 ...
- CLH lock queue的原理解释及Java实现
目录 背景 原理解释 Java代码实现 定义QNode 定义Lock接口 定义CLHLock 使用场景 运行代码 代码输出 代码解释 CLHLock的加锁.释放锁过程 第一个使用CLHLock的线程自 ...
- 安装卸载nginx
http://www.nginx.cn/install ubuntu和debain下的apt方式安装软件很方便,特别是对于新手安装和卸载nginx. 由于nginx不能动态添加模块,所以会经常安装和卸 ...
- leetcode117. 填充每个节点的下一个右侧节点指针 II
给定一个二叉树struct Node { int val; Node *left; Node *right; Node *next;}填充它的每个 next 指针,让这个指针指向其下一个右侧节 ...
- 抓包工具fiddler使用-初级
参考 https://kb.cnblogs.com/page/130367/#introduce
- mysql-查询不同列的数量合计
车辆违规信息表testmodel_test 表结构: 表字段:cra_id(车牌号),if_weigui(该次行驶是否违规,0是正常,1是违规) 目的: 查询表中共有几辆车,违规的有几辆车: 方法1 ...
- C语言基础知识:几种特殊的函数宏封装方式
函数宏介绍 函数宏,即包含多条语句的宏定义,其通常为某一被频繁调用的功能的语句封装,且不想通过函数方式封装来降低额外的弹栈压栈开销. 函数宏本质上为宏,可以直接进行定义,例如: #define INT ...
- MySQL的两种日志类型,redo log,binlog
文章内容学习:极客时间-林晓彬老师-MySQL实战45讲 整理而得 我们知道MySQL数据库在发生意外宕机的情况下,可以将数据恢复到历史的某个时间点,能实现这个功能依靠的是日志,MySQL提供两种类型 ...
- Django 的模板语法之过滤器
后端朝前端页面传递数据的方式 # 第一种 return render(request,'index.html',{'n':n}) # 第二种 return render(request,'index. ...
- 【2014广州市选day1】JZOJ2020年9月12日提高B组T2 导弹拦截
[2014广州市选day1]JZOJ2020年9月12日提高B组T2 导弹拦截 题目 Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统 V1.0.但是这种导弹拦截系统有一个缺 ...