採用React+Ant Design組件化開發前端界面（一）

react-start

基礎知識

1.使用腳手架創建項目並啟動

​ 1.1 安裝腳手架：

npm install -g create-react-app

​ 1.2 使用腳手架創建項目：

create-react-app antd-start-demo antd-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

webpack配置

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 (
 

 <button>click/<button>
 

 );
 }
...

注意：默認情況下安裝的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地址 歡迎star！

作者博客：做全棧攻城獅

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