从零开始使用React+Ant Design实现某后台管理系统 (一)准备阶段

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mary_wmt/article/details/93872830

工具:vscode

信息架构+原型+流程图参考:https://www.jianshu.com/p/d28c22ca6cd4

准备阶段

1.安装和初始化

打开一个文件夹,在控制台输入

$ npm i yarn 					##安装yarn
$ yarn create react-app system-wmt 	##文件名:system-wmt;自动初始化一个脚手架并安装 React 项目的各种必要依赖
$ cd antd-demo  				##进入项目
$ yarn start   					##启动项目此时浏览器会访问 http://localhost:3000/ ,看到 Welcome to React 的界面

2.引入antd

$ yarn add antd					 ## 安装并引入 antd
$ npm i antd -S					 ## 安装并引入 antd

修改 src/App.js,引入 antd 的按钮组件

import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

修改 src/App.css,在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

3.按需引入配置

1).使用customize-cra

$ yarn add react-app-rewired customize-cra 				  ## 安装 customize-cra

更改package.json

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

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

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

2).使用 babel-plugin-import

$ yarn add babel-plugin-import

修改 config-overrides.js

+ const { override, fixBabelImports } = require('customize-cra');

//- module.exports = function override(config, env) {
//-   // do stuff with the webpack config...
//-   return config;
//- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码,并且按下面的格式引入模块。

 // src/App.js
  import React, { Component } from 'react';
//- import Button from 'antd/es/button';
+ import { Button } from 'antd';
  import './App.css';

   export default class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

4.国际化

import { LocaleProvider } from 'antd'
import zhCN from 'antd/es/locale-provider/zh_CN';

render(
    // 国际化-- locale={zhCN} 汉语
    <LocaleProvider locale={zhCN}>
        <App />
    </LocaleProvider>,
    document.querySelector('#root')
)

5.使用路由

$ npm install react-router-dom --save-dev  ##使用路由实现页面间的跳转

6.自定义主题

$ yarn add less less-loader
- 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' },
+ }),
);

7.定制主题

文件夹目录下新建 theme.js

module.exports = {
    '@primary-color': '#9966CC', // 全局主色
    '@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, .45)', // 次文本色
    '@disabled-color ': 'rgba(0, 0, 0, .25)', // 失效色
    '@border-radius - base': '4px', // 组件/浮层圆角
    '@border-color - base': '#d9d9d9', // 边框色
    '@box-shadow - base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮层阴影
}
展开阅读全文

没有更多推荐了,返回首页