antd配置config-overrides.js文件的操作
更新時(shí)間：2020年10月31日 10:08:09 作者：Tommy_marc
這篇文章主要介紹了antd配置config-overrides.js文件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
下載antd 包
npm install antd
下載依賴包（定義組件按需求打包）
npm install react-app-rewired customize-cra babel-plugin-import
自定義less-loader,改變antd默認(rèn)樣式
npm install less less-loader
根目錄定義加載按需打包的js配置模塊: config-overrides.js
const {override,fixBabelImports,addLessLoader} =require('customize-cra');
module.exports = override(
// 針對(duì)antd 實(shí)現(xiàn)按需打包：根據(jù)import來(lái)打包 (使用babel-plugin-import)
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
style:true,//自動(dòng)打包相關(guān)的樣式 默認(rèn)為 style:'css'
}),
// 使用less-loader對(duì)源碼重的less的變量進(jìn)行重新制定，設(shè)置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';
/*
應(yīng)用的根組件
*/
export default class App extends Component{
handleClick = ()=>{
message.success('成功啦')
}
render(){
return (
<Button type="primary" onClick={this.handleClick}>測(cè)試antd</Button>
)
}
}
補(bǔ)充知識(shí)：Vue 監(jiān)聽鼠標(biāo)左鍵 鼠標(biāo)右鍵以及鼠標(biāo)中鍵修飾符click.left&contextmenu&click.middle
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
<!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的標(biāo)簽-->
<!--鼠標(biāo)左鍵-->
<div :style="left_style" @click.left="mouseclick('左')"></div>
<!--鼠標(biāo)中鍵-->
<div :style="middle_style" @click.middle="mouseclick('中')"></div>
<!--鼠標(biāo)右鍵-->
<!--加prevent為了屏蔽瀏覽器自帶右鍵-->
<div :style="right_style" @contextmenu.prevent="mouseclick('右')"></div>
</div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 監(jiān)聽鼠標(biāo)左鍵 鼠標(biāo)右鍵以及鼠標(biāo)中鍵修飾符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('點(diǎn)擊鼠標(biāo)'+where+'鍵觸發(fā)');
},
}
});
</script>
</body>
</html>
以上這篇antd配置config-overrides.js文件的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2017-10-10
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
element?el-tooltip實(shí)現(xiàn)自定義修改樣式
本文主要介紹了element?el-tooltip實(shí)現(xiàn)自定義修改樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue路由傳參-如何使用encodeURI加密參數(shù)
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3子組件實(shí)現(xiàn)v-model用法的示例代碼
在Vue 3中,實(shí)現(xiàn)自定義的input組件并支持v-model綁定,涉及到對(duì)modelValue這個(gè)默認(rèn)prop的處理和對(duì)應(yīng)的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實(shí)現(xiàn)v-model用法的示例,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了使用Vuex解決Vue中的身份驗(yàn)證問(wèn)題,本文通過(guò)文字實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
在Vue項(xiàng)目中優(yōu)化字體文件的加載和緩存的常用方法
在現(xiàn)代 Web 開發(fā)中,字體文件通常是頁(yè)面加載時(shí)間的重要因素之一,特別是在字體文件較大或網(wǎng)絡(luò)環(huán)境不佳的情況下,用戶體驗(yàn)可能會(huì)受到影響,本文將詳細(xì)探討如何在 Vue.js 項(xiàng)目中優(yōu)化字體文件的加載和緩存,以提高頁(yè)面性能,需要的朋友可以參考下2024-09-09
vue-cli 引入jQuery，Bootstrap，popper的方法
這篇文章主要介紹了vue-cli 引入jQuery，Bootstrap，popper的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)現(xiàn)移動(dòng)端適方案的完整步驟
現(xiàn)在的手機(jī)五花八門,造就了移動(dòng)端窗口分辨率繁多的局面,在不同分辨率的屏幕下保持與UI圖一致的效果,就成了讓前端不得不頭疼的問(wèn)題,下面這篇文章主要給大家介紹了vue實(shí)現(xiàn)移動(dòng)端適方案的相關(guān)資料,需要的朋友可以參考下2022-10-10