antd配置config-overrides.js文件的操作


Posted in Javascript onOctober 31, 2020

下载antd 包

npm install antd

下载依赖包(定义组件按需求打包)

npm install react-app-rewired customize-cra babel-plugin-import

自定义less-loader,改变antd默认样式

npm install less less-loader

根目录定义加载按需打包的js配置模块: config-overrides.js

const {override,fixBabelImports,addLessLoader} =require('customize-cra');
module.exports = override(
 // 针对antd 实现按需打包:根据import来打包 (使用babel-plugin-import)
 fixBabelImports('import',{
  libraryName:'antd',
  libraryDirectory:'es',
  style:true,//自动打包相关的样式 默认为 style:'css'
 }),
 // 使用less-loader对源码重的less的变量进行重新制定,设置antd自定义主题
 addLessLoader({
  javascriptEnabled: true,
  modifyVars:{'@primary-color':'#1DA57A'},
 })
);

修改packge.json 的配置文件

"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react--app-rewired test",
 "eject": "react-scripts eject"
 },

在app.js引入需要的antd模块:

import React ,{Component} from 'react';
import { Button , message} from 'antd';

/* 
应用的根组件
*/

export default class App extends Component{

 handleClick = ()=>{
  message.success('成功啦')
 }
 render(){
  return (
   <Button type="primary" onClick={this.handleClick}>测试antd</Button>   
   )
 }
}

补充知识:Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

我就废话不多说了,大家还是直接看代码吧~

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="vue.js"></script>
 <title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
 <!--鼠标左键-->
 <div :style="left_style" @click.left="mouseclick('左')"></div>
 <!--鼠标中键-->
 <div :style="middle_style" @click.middle="mouseclick('中')"></div>
 <!--鼠标右键-->
 <!--加prevent为了屏蔽浏览器自带右键-->
 <div :style="right_style" @contextmenu.prevent="mouseclick('右')"></div>

</div>
<script>
 var vue = function (options){new Vue(options)};
 vue({
  el:'#title',
  data:{
   title:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
  }
 });
 var app = vue({
  el:'#ask',
  data:{
   left_style:{border:'solid 2px red',height:'200px'},
   right_style:{border:'solid 2px blue',height:'200px'},
   middle_style:{border:'solid 2px yellow',height:'200px'},
  },
  methods:{
   mouseclick(where){
    alert('点击鼠标'+where+'键触发');
   },

  }
 });

</script>
</body>
</html>

以上这篇antd配置config-overrides.js文件的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 #Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 #Javascript
antd多选下拉框一行展示的实现方式
Oct 31 #Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 #Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 #Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
You might like
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
原生js实现each方法实例代码详解
2019/05/27 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
KTV的创业计划书范文
2014/02/02 职场文书
大学毕业自我评价
2014/02/02 职场文书
美术学专业求职信
2014/07/23 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python