摘要：基礎知識使用腳手架創(chuàng)建項目并啟動安裝腳手架使用腳手架創(chuàng)建項目為項目名。否則可能導致項目發(fā)布上線后，報錯無法執(zhí)行。安裝測試使用注意默認情況下安裝的需要引入才會生效樣式，但很多時候，我們只是使用了部分組件，引入整個樣式文件，有些得不償失。

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轉換為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開發(fā)的，我們使用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中做相同的配置。否則可能導致項目發(fā)布上線后，報錯無法執(zhí)行。

2.4 安裝antd

 yarn add antd

2.5 測試使用

import { Button } from "antd";
import "antd/dist/antd.css";

...
 render() {
    return (
      

          click
      
    );
  }
...

注意：默認情況下安裝的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會自動根據(jù)引入的組件，默認加載對應的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)了修改主題色。

本文GitHub代碼：GitHub地址 歡迎star！

作者博客：做全棧攻城獅

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

我的博客即將同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=2y2zuha3q6uc0