溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
antd如何配置config-overrides.js文件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
下載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 : @click.left="mouseclick('左')"></div>
<!--鼠標中鍵-->
<div : @click.middle="mouseclick('中')"></div>
<!--鼠標右鍵-->
<!--加prevent為了屏蔽瀏覽器自帶右鍵-->
<div : @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文件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
