antd配置config-overrides.js文件的操作
下载antd包
npminstallantd
下载依赖包(定义组件按需求打包)
npminstallreact-app-rewiredcustomize-crababel-plugin-import
自定义less-loader,改变antd默认样式
npminstalllessless-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-rewiredstart", "build":"react-app-rewiredbuild", "test":"react--app-rewiredtest", "eject":"react-scriptseject" },
在app.js引入需要的antd模块:
importReact,{Component}from'react'; import{Button,message}from'antd'; /* 应用的根组件 */ exportdefaultclassAppextendsComponent{ handleClick=()=>{ message.success('成功啦') } render(){ return(测试antd ) } }
补充知识:Vue监听鼠标左键鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
我就废话不多说了,大家还是直接看代码吧~
{{title}}