antd配置config-overrides.js檔案的操作
阿新 • • 發佈：2020-11-02
下載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',middle_style:{border:'solid 2px yellow',},methods:{
mouseclick(where){
alert('點選滑鼠'+where+'鍵觸發');
},}
});
</script>
</body>
</html>以上這篇antd配置config-overrides.js檔案的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。