React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟
基礎(chǔ)知識
1.使用腳手架創(chuàng)建項目并啟動
1.1 安裝腳手架：
npm install -g create-react-app
1.2 使用腳手架創(chuàng)建項目：
create-react-app antd-start-demo
antd-start-demo為項目名。
1.3 啟動
npm start
2.npm轉(zhuǎn)換為yarn
2.1 安裝yarn：
npm install -g yarn
2.2 獲取yarn當前的鏡像源：
yarn config get registry
2.3 設(shè)置為淘寶鏡像：
yarn config set registry 'https://registry.npm.taobao.org'
2.4 常用命令：
yarn init --初始化 yarn add --添加模塊 yarn remove --刪除模塊 yarn /yarn install --安裝項目中的依賴
項目搭建
2.1 安裝react-router 4.0、axios、less-loader
yarn add react-router-dom axios less-loader
2.2 暴漏webpack配置
yarn eject
提示： 如果運行yarn eject報錯
在我們修改了文件之后，在使用 yarn eject命令時，會報以上錯誤，這是因為我們使用腳手架創(chuàng)建項目時，自動增加了 .gitignore 文件，而我們本地卻沒有倉庫，這時候只需執(zhí)行以下命令把項目添加到我們本地倉庫，在執(zhí)行即可。
解決辦法：
git add . git commit -m 'init' yarn eject
然后運行yarn eject就可以了
webpack配置
2.3 配置less-loader
antd是基于less開發(fā)的，我們使用less可以方便的改變主題色等配置。
安裝less模塊：yarn add less@2.7.3
打開config/webpack.config.dev.js添加如下配置：
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: { importLoaders: 1 },
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
{ loader: require.resolve('less-loader') }
],
},
到配置cssload同級如圖所示
圖片示例
注意：在webpack.config.dev.js添加的配置部分，也需要在webpack.config.prod.js中做相同的配置。否則可能導(dǎo)致項目發(fā)布上線后，報錯無法執(zhí)行。
2.4 安裝antd
yarn add antd
2.5 測試使用
import { Button } from "antd";
import 'antd/dist/antd.css';
...
render() {
return (
<div>
<Button>click</Button>
</div>
);
}
...
注意：默認情況下安裝的antd需要引入antd/dist/antd.css才會生效樣式，但很多時候，我們只是使用了部分組件，引入整個antd樣式文件，有些得不償失。所以按需加載應(yīng)運而生。
2.6 antd按需加載
1.添加babel-plugin-import，
yarn add babel-plugin-import
2.打開webpack配置，搜索：JS with Babel
找到如下配置：
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
},
},
},
],
],
cacheDirectory: true,
// Save disk space when time isn't as important
cacheCompression: true,
compact: true,
},
},
進行修改plugin下添加：
["import", { "libraryName": "antd", "style": true }]
至此可以取消引入css文件了，babel會自動根據(jù)引入的組件，默認加載對應(yīng)的css。
2.7修改主題色
{
loader: require.resolve('less-loader'),
options: {
modules: false,
modifyVars: {
"@primary-color": "#f9c700"
}
}
}
在webpack，中配置less的地方即可修改。@primary-color為antd內(nèi)置的less變量，只需要覆蓋掉默認的配置，就實現(xiàn)了修改主題色。
注意： 運行yarn run start報錯
報錯ValidationError: Invalid options object. Less Loader has been initialized using an opti ons object
解決方法： 卸載less-loader，安裝less-loader@5.0.0
yarn remove less-loader yarn add less-loader@5.0.0
到此這篇關(guān)于React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)React Ant Design搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對大家學(xué)習(xí)React有一定的幫助，需要的可以參考一下2023-01-01
本篇文章主要介紹了React-Todos入門例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
最近在學(xué)習(xí)React，學(xué)習(xí)到了列表渲染這一塊，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于React學(xué)習(xí)筆記之列表渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了React+Antd實現(xiàn)可增刪改表格的示例，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁面見進行切換，下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法，文中通過圖文介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了react實現(xiàn)簡單的拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了在React項目中使用Eslint代碼檢查工具及常見問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10