採用React+Ant Design元件化開發前端介面(一)

摘要： react-start 基礎知識 1.使用腳手架建立專案並啟動 ​ 1.1 安裝腳手架： npm install -g create-react-app ​ 1.2 使用腳手架建立專案： create-react-app antd...

基礎知識

1.使用腳手架建立專案並啟動

​ 1.1 安裝腳手架：

npm install -g create-react-app

​ 1.2 使用腳手架建立專案：

create-react-app antd-start-demoantd-start-demo為專案名。

​ 1.3 啟動

npm start

2.npm轉換為yarn

​ 2.1 安裝yarn：

npm install -g yarn

​ 2.2 獲取yarn當前的映象源：

yarn config get registry

​ 2.3 設定為淘寶映象：

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

2.3 配置less-loader

​ antd是基於less開發的，我們使用less可以方便的改變主題色等配置。

​ 安裝less模組： yarn add [email protected]

​ 開啟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中做相同的配置。否則可能導致專案釋出上線後，報錯無法執行。

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樣式檔案，有些得不償失。所以按需載入應運而生。

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會自動根據引入的元件，預設載入對應的css。

2.7修改主題色

{
loader: require.resolve('less-loader'),
options: {
modules: false,
modifyVars: {
"@primary-color": "#f9c700"
}
}
}

在webpack，中配置less的地方即可修改。@primary-color為antd內建的less變數，只需要覆蓋掉預設的配置，就實現了修改主題色。

本文GitHub/">GitHub程式碼： ofollow,noindex" target="_blank">GitHub地址 歡迎star！

作者部落格： 做全棧攻城獅

分享交流前後端知識，一起做全棧攻城獅。