React降級配置及AntDesign配置的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了React降級配置及Ant Design配置的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

“專業(yè)、務(wù)實、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)建站是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)、設(shè)計服務(wù)業(yè)務(wù)。我們始終堅持以客戶需求為導(dǎo)向,結(jié)合用戶體驗與視覺傳達,提供有針對性的項目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場,引領(lǐng)市場!

React降級配置

1.使用create-react-app創(chuàng)建一個目錄

React降級配置及Ant Design配置的示例分析 

2.查看當(dāng)前目錄下的package.json文件中的配置

React降級配置及Ant Design配置的示例分析 

注意:

可以看到當(dāng)前的react-scripts是2.1.2版本,且只兼容IE11以上,所以為了更好地兼容IE瀏覽器,我們需要做降級配置

3.進入目錄,在master分支下進行配置(如果創(chuàng)建好的目錄中沒有.git文件,使用git init初始化目錄)

注意:

之所以要在master分支下進行配置,是為了在下文中運行 npm run eject

4.將原來的react-script刪除

React降級配置及Ant Design配置的示例分析 

5.重新安裝對應(yīng)版本(比如1.x的版本,比較穩(wěn)定的版本)

React降級配置及Ant Design配置的示例分析

6.添加git庫(將以上做的修改添加到git庫,這也是為什么如果沒有.git文件,一定要先初始化)

React降級配置及Ant Design配置的示例分析

7.運行npm run eject(如果有報錯,可以不用管,只要有ejected successfully就可以)

React降級配置及Ant Design配置的示例分析 

8.由于重新配置可以先刪除node-moduls,然后在 npm i重新安裝依賴

React降級配置及Ant Design配置的示例分析

9.npm start,查看是否能運行(可能會報錯,解決方法再下面)

10.刪除package.json中的browserslist(因為這個配置是react-scripts2.x版本的,再降級以后,如果還存在,代碼運行會報錯)

React降級配置及Ant Design配置的示例分析 

配置less

1.src中內(nèi)容可以都刪除,留下index.js

React降級配置及Ant Design配置的示例分析

2.創(chuàng)建一個App.js(此時查看是否能運行,顯示App.js的內(nèi)容)

React降級配置及Ant Design配置的示例分析 

3.創(chuàng)建App.less,并將文件引入到App.js中(import './App.less')

React降級配置及Ant Design配置的示例分析 

4.安裝less包

React降級配置及Ant Design配置的示例分析 

5.進行l(wèi)ess文件的配置,找到config中的dev文件

React降級配置及Ant Design配置的示例分析

6.找到里面的css的配置,復(fù)制一份到css配置文件的下方,將loader中css換成less-loader以及options為以下內(nèi)容

React降級配置及Ant Design配置的示例分析

React降級配置及Ant Design配置的示例分析

 7.配置完選項,需要重啟項目才能生效

此時配置的less已經(jīng)生效

React降級配置及Ant Design配置的示例分析

Ant Design 配置

1.安裝antd

React降級配置及Ant Design配置的示例分析

2.安裝按需加載組件代碼和樣式的插件

React降級配置及Ant Design配置的示例分析

3.在package.json的babel中配置(注意要在babel中進行配置,不要寫在babel外面去了)

React降級配置及Ant Design配置的示例分析

4.測試引用button為例(先重啟)

React降級配置及Ant Design配置的示例分析

5.配置ant中的樣式變量

React降級配置及Ant Design配置的示例分析

以下是可以配置的樣式變量

React降級配置及Ant Design配置的示例分析

6.除了第5條的配置的方法,還可以引入配置(新建配置文件color.js在config文件中)

React降級配置及Ant Design配置的示例分析

React降級配置及Ant Design配置的示例分析

7.在dev中引入colors.js,再調(diào)用

8.在prod中和dev中一樣修改less、引入默認colors

9.最后npm run build檢查是否會出錯

感謝你能夠認真閱讀完這篇文章,希望小編分享的“React降級配置及Ant Design配置的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目:React降級配置及AntDesign配置的示例分析-創(chuàng)新互聯(lián)
瀏覽地址:http://bm7419.com/article20/igpjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)網(wǎng)站收錄、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、動態(tài)網(wǎng)站建站公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運營