文章管理系统——前端（一）

发表于 | 分类于 | 次阅读
  • 一个后台管理界面的前台
  • 主要技术栈：react hooks + redux + immutable.js + antd
  • 这一章主要讲依赖安装与 antd 配置

antd 文档：https://ant.design/docs/react/use-with-create-react-app-cn

依赖安装

antd

1
$ yarn add antd
1
$ yarn add react-app-rewired customize-cra
1
$ yarn add babel-plugin-import
1
$ yarn add less less-loader

redux

1
$ yarn add redux
1
$ yarn add react-redux

axios

1
$ yarn add axios

styled-components

1
$ yarn add styled-components

redux-thunk

1
$ yarn add redux-thunk

redux-immutable

1
$ yarn add redux-immutable

react-router-dom

1
$ yarn add react-router-dom

使用 antd

使用

安装了 antd 后，在需要使用的地方导入：

1
2
import 'antd/dist/antd.css';
import Button from 'antd/es/button';

就可以使用了，这里导入了 Button 做示例，但要注意，此时是导入的全部样式。

高级设置

安装了 react-app-rewired 和 customize-cra 之后，修改 package.json：

1
2
3
4
5
6
7
/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置：

1
2
3
4
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

按需加载

安装了 babel-plugin-import 后，修改 config-overrides.js 文件：

1
2
3
4
5
6
7
8
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

然后移除前面导入的 import 'antd/dist/antd.css';

自定义主题

安装了 less 和 less-loader 后，修改 config-overrides.js 文件如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。

0%