React---实战项目（一）

一、脚手架的单独定制

1、根据 ant.design，按照里面的操作 配置脚手架
2、yarn add @craco/craco
3、更改配置文件

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

4、在根目录下创建一个craco.config.js的文件

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

5、yarn add craco-less
6、yarn add antd
7、在index.js文件中引入 less文件
import "antd/dist/antd.less"
并且在craco.config.js中添加 新增代码

   plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
},

8、安装装饰器，支持装饰器模式
yarn add @babel/plugin-proposal-decorators

9、可以根据需要修改antd的主题配色

• 在根目录下创建 theme.js 文件

module.exports = {
    '@primary-color':' #1890ff', // 全局主色
    '@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', // 边框色
    '@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)'// 浮层阴影
}

• 需要在craco.config,js里面移入 thenme

const modifyVars = require("./theme")
lessOptions: {
    modifyVars,
    javascriptEnabled: true,
},