Download the antd package
npm install antd
Download dependency package (define components to package as required)
npm install react-app-rewired customize-cra babel-plugin-import
Customize less-loader, change the default style of antd
npm install less less-loader
The root directory defines the js configuration module that is packaged on demand:
const {override,fixBabelImports,addLessLoader} =require('customize-cra');
= override(
// Implement on-demand packaging for antd: package according to import (using babel-plugin-import) fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:true,//Automatic packaging related styles default to style:'css' }),
// Use less-loader to re-format less variables with source code, set antd custom theme addLessLoader({
javascriptEnabled: true,
modifyVars:{'@primary-color':'#1DA57A'},
})
);
Modified configuration file
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react--app-rewired test",
"eject": "react-scripts eject"
},
In introducing the required antd module:
import React ,{Component} from 'react';
import { Button , message} from 'antd';
/*
The root component of the application
*/
export default class App extends Component{
handleClick = ()=>{
('It's successful')
}
render(){
return (
<Button type="primary" onClick={}>testantd</Button>
)
}
}
Supplementary knowledge:Vue monitors the left mouse button, right mouse button and middle mouse button modifier&contextmenu&
I won't say much nonsense, let's just read the code~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src=""></script>
<title >{{title}}</title>
</head>
<body>
<div ><!--vueUncontrollablebodyandhtmlTags-->
<!--Left mouse button-->
<div :style="left_style" @="mouseclick('Left')"></div>
<!--Middle mouse button-->
<div :style="middle_style" @="mouseclick('middle')"></div>
<!--Right mouse button-->
<!--addpreventIn order to block the browser, the right button is included-->
<div :style="right_style" @="mouseclick('right')"></div>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue listens to the left mouse button, right mouse button and middle mouse button modifier&contextmenu&'
}
});
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('Click the mouse'+where+'Key Trigger');
},
}
});
</script>
</body>
</html>
The operation of the above antd configuration file is all the content I share with you. I hope you can give you a reference and I hope you can support me more.