第一章：項(xiàng)目創(chuàng)建以及引入(Ant Design) 配置全局less

項(xiàng)目創(chuàng)建

本次項(xiàng)目使用create-react-app命令進(jìn)行創(chuàng)建

 // 使用js創(chuàng)建項(xiàng)目
npx create-react-app react-demo
// yarn創(chuàng)建項(xiàng)目
yarn create react-app react-demo
// ts創(chuàng)建項(xiàng)目
npx create-react-app react-demo --typescript
// yarn ts
yarn create react-app react-demo --template typescript

這里我選擇用Typescript作為開(kāi)發(fā)語(yǔ)言。

create-react-app的目錄結(jié)構(gòu)

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

引入Ant Design

// npm
npm install antd
// 使用yarn
yarn add antd

以上2個(gè)步驟也有antd官網(wǎng)提供簡(jiǎn)化版本。創(chuàng)建cra-antd typescript

yarn create react-app antd-demo
// or
npx create-react-app antd-demo

引入craco配置全局less

// 后續(xù)均使用yarn
yarn add @craco/craco

對(duì)package.json進(jìn)行修改

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

在項(xiàng)目根目錄創(chuàng)建一個(gè) craco.config.js 用于修改默認(rèn)配置。

然后安裝 craco-less 并修改 craco.config.js 文件如下。

yarn add craco-less

配置craco.config.js，可以copy下來(lái)，然后根據(jù)需求自行修改。
以下是antd官方demo的配置，大家可以按需修改。

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

定義全局less

創(chuàng)建less

src/style/index.less

在該less下配置項(xiàng)目的主要樣式等

@import "~antd/dist/antd.less";

@primary-color: #1890ff; //主題色
@border-radius-base: 2px;
@link-color: #1890ff; // 鏈接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯(cuò)誤色
@font-size-base: 14px; // 主字號(hào)
@heading-color: rgba(0, 0, 0, 0.85); // 標(biāo)題色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 組件/浮層圓角
@border-color-base: #d9d9d9; // 邊框色

在src/index.tsx下全局引入index.less

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './style/index.less'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

項(xiàng)目框架第一步驟搞定。