版本:【 "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")的更多相关文章

  1. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...

  2. react + react-router + less +antd 开发环境

    react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目. 2.进入项目目录,首先 npm r ...

  3. easy canvas shape with react antdesign 简单的canvas图形in antd & react

    //show: //code: import React from "react" import {findDOMNode} from 'react-dom' import { B ...

  4. 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

  5. 十九、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 ...

  6. antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...

  7. react中自定义antd主题与支持less(第二部)

    自定义主题 首先自定义主题需要修改antd,antd本身也是less写的之后编译成css的,所以当我们需要使用less. 1.yarn add react-app-rewire-less --dev ...

  8. Mock平台3-初识Antd React 开箱即用中台前端框架

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 内容提要 首先说下为啥这次测试开发系列教程前端选择Antd React,其实也是纠结对比过最终决定挑战一把,想法大概有几下几点: 笔者自己 ...

  9. 从0开始用webpack开发antd,react组件库npm包并发布

    一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...

随机推荐

  1. 下载器Folx的创建种子功能怎么使用

    当我们想要分享一些自己制作的资源时,可以使用Folx的创建种子功能,在网络上分享种子,供他人下载,这个过程也被称为做种.作为种子创建者,需要在一定时间内保持做种进程,以便维持种子的生命期限,方便他人下 ...

  2. CLH lock queue的原理解释及Java实现

    目录 背景 原理解释 Java代码实现 定义QNode 定义Lock接口 定义CLHLock 使用场景 运行代码 代码输出 代码解释 CLHLock的加锁.释放锁过程 第一个使用CLHLock的线程自 ...

  3. 安装卸载nginx

    http://www.nginx.cn/install ubuntu和debain下的apt方式安装软件很方便,特别是对于新手安装和卸载nginx. 由于nginx不能动态添加模块,所以会经常安装和卸 ...

  4. leetcode117. 填充每个节点的下一个右侧节点指针 II

    给定一个二叉树struct Node {  int val;  Node *left;  Node *right;  Node *next;}填充它的每个 next 指针,让这个指针指向其下一个右侧节 ...

  5. 抓包工具fiddler使用-初级

    参考 https://kb.cnblogs.com/page/130367/#introduce

  6. mysql-查询不同列的数量合计

    车辆违规信息表testmodel_test 表结构: 表字段:cra_id(车牌号),if_weigui(该次行驶是否违规,0是正常,1是违规) 目的: 查询表中共有几辆车,违规的有几辆车: 方法1 ...

  7. C语言基础知识:几种特殊的函数宏封装方式

    函数宏介绍 函数宏,即包含多条语句的宏定义,其通常为某一被频繁调用的功能的语句封装,且不想通过函数方式封装来降低额外的弹栈压栈开销. 函数宏本质上为宏,可以直接进行定义,例如: #define INT ...

  8. MySQL的两种日志类型,redo log,binlog

    文章内容学习:极客时间-林晓彬老师-MySQL实战45讲 整理而得 我们知道MySQL数据库在发生意外宕机的情况下,可以将数据恢复到历史的某个时间点,能实现这个功能依靠的是日志,MySQL提供两种类型 ...

  9. Django 的模板语法之过滤器

    后端朝前端页面传递数据的方式 # 第一种 return render(request,'index.html',{'n':n}) # 第二种 return render(request,'index. ...

  10. 【2014广州市选day1】JZOJ2020年9月12日提高B组T2 导弹拦截

    [2014广州市选day1]JZOJ2020年9月12日提高B组T2 导弹拦截 题目 Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统 V1.0.但是这种导弹拦截系统有一个缺 ...