目錄

引言
第一章：項(xiàng)目創(chuàng)建、antd、less
第二章：路由攔截、路由嵌套
第三章：狀態(tài)管理 Redux
第四章：網(wǎng)絡(luò)請(qǐng)求、代理、mockjs
第五章：webpack配置
第六章：Eslint

源碼地址

https://github.com/dxn920128/cms-base

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

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

// npm 全局安裝create-react-app
npm install -g create-react-app
// 創(chuàng)建項(xiàng)目
npx create-react-app react-demo --typescript
// yarn
yarn create react-app react-demo --template typescript

webpack配置

使用 create-react-app初始化項(xiàng)目后，需要對(duì)webpack進(jìn)行配置。webpack配置包含：less進(jìn)行antd主題配置、別名、請(qǐng)求代理、mocker數(shù)據(jù)等等。
1、使用 npm run eject 命令將所有內(nèi)建的配置暴露出來(lái)。
2、本次推薦使用 craco 進(jìn)行配置。

• @craco/craco
• craco-less
• babel-plugin-import 組件按需加載
• antd react優(yōu)秀的前端ui庫(kù)

npm install -D @craco/craco  @babel/plugin-proposal-decorators babel-plugin-import craco-less 
npm install antd

1、修改package.json啟動(dòng)項(xiàng)。

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

2、創(chuàng)建craco.config.js并進(jìn)行配置

const CracoLessPlugin = require('craco-less')
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,//引入less
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true //js修改主題樣式
          }
        }
      }
    }
  ],
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }], //裝飾器
      [
        'import',//按需引入antd 樣式
        {
          'libraryName': 'antd',
          'libraryDirectory': 'es',
          'style': true
        }
      ]
    ]
  },
};

3、定義antd全局樣式，在創(chuàng)建 index.less文件

src/assets/style/index.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; // 錯(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; // 邊框色
@layout-header-background: #ffffff;
@layout-body-background: #ffffff;

@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮層陰影

4、全局引入index.less

import React from 'react'
import ReactDOM from 'react-dom'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './store/index'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN'
import AppRouter from './pages/frame/appRouter'
import './assets/style/index.less'

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </ConfigProvider>,
  document.getElementById('root')
)