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 ...
随机推荐
- 趣文分享:C 语言和 C++、C# 的区别在什么地方?
任务: 把大象放到冰箱里.
- 新手上路之JDK11的下载、安装与PATH环境变量的配置
目录 JDK11的下载 找到目标JDK JDK的下载 JDK11的安装 PATH环境变量的配置 为什么要配置环境变量? 配置前再检查一遍 配置变量 检查环境变量配置成功与否 细究起来,JDK11与JD ...
- 强大的拉姆表达式转Sql 类库 - SqlSugar 隐藏功能之Lambda
使用场景 1.Lambda to sql 一直是ORM中最难的功能之一,如果有现成的解析库那么自已写一个ORM难度将大大降低 2.通过Lambda作为KEY进行缓存操作,特别是仓储模式想要拿到表达式进 ...
- java并发编程实战《二十一》无锁工具类
不安全的累加代码,如下 1 public class Test { 2 long count = 0; 3 void add10K() { 4 int idx = 0; 5 while(idx++ & ...
- 什么是Python生成器?与迭代器的关系是什么?
生成器是一个特殊的迭代器,它保存的是算法,每次调用next()或send()就计算出下一个元素的值,直到计算出最后一个元素,没有更多的元素时,抛出StopIteration.生成器有两种类型,一种是生 ...
- PyQt(Python+Qt)学习随笔:QTreeView树形视图的autoExpandDelay属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeView树形视图的autoExpandDelay属性用于控制在视图中拖拽时,当鼠标停留在一 ...
- Python基础知识学习随笔
Python学习随笔:PyCharm的错误检测使用及调整配置减少错误数量 Python学习随笔:获取当前主机名和用户名的方法 博客地址:https://blog.csdn.net/LaoYuanPyt ...
- PyQt(Python+Qt)学习随笔:在一个窗口点击按钮弹出另一个窗口的实现方法及注意事项
在Qt Designer中定义了两个窗口,一个主窗口一个弹出窗口,需要实现在主窗口点击一个按钮时弹出弹出窗口. 经老猿验证: 1.弹窗的窗口类型无特殊要求,只要是QWidget等窗口部件就可以,也可以 ...
- 百度前端技术学院-基础-day22-24
第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...
- vue 编程式导航
// 命名的路由(这里的name为路由中定义的name名称) this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参 ...