第一章：项目创建以及引入(Ant Design) 配置全局less

项目创建

本次项目使用create-react-app命令进行创建

 // 使用js创建项目
npx create-react-app react-demo
// yarn创建项目
yarn create react-app react-demo
// ts创建项目
npx create-react-app react-demo --typescript
// yarn ts
yarn create react-app react-demo --template typescript

这里我选择用Typescript作为开发语言。

create-react-app的目录结构

├── 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个步骤也有antd官网提供简化版本。创建cra-antd typescript

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

引入craco配置全局less

// 后续均使用yarn
yarn add @craco/craco

对package.json进行修改

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

在项目根目录创建一个 craco.config.js 用于修改默认配置。

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

yarn add craco-less

配置craco.config.js，可以copy下来，然后根据需求自行修改。
以下是antd官方demo的配置，大家可以按需修改。

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

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

定义全局less

创建less

src/style/index.less

在该less下配置项目的主要样式等

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

@primary-color: #1890ff; //主题色
@border-radius-base: 2px;
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@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();

项目框架第一步骤搞定。