基于React中后台UI库:Ant Design

官网:https://ant.design/index-cn
GitHub:https://github.com/ant-design/ant-design

一、什么是 Ant Design

1、Ant Design 就是基于 React 实现的一套组件库
2、Ant Design 提炼自企业级中后台产品的交互语言和视觉风格
3、Ant Design 使用 TypeScript构建,提供完整的类型定义文件

二、Ant Design 的安装

1、全局安装脚手架

npm install -g create-react-app

2、新建项目

create-react-app reactantd

3、安装组件:

npm install antd --save

4、引入组件

在需要使用组件的页面进行引入并使用

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

class App extends Component {
  render() { 
    return ( 
      
); } } export default App;

二、组件按需加载

1、 要配置组件的按需加载,需要在项目根目录安装react-app-rewired,用来取代react-script,在使用npm进行安装的时候,还需要指定特定的版本,另外,还需要安装babel进行模块导入:

npm install [email protected] babel-plugin-import --save

2、 在项目根目录新建文件config-overrides.js,用于在项目启动前,先对webpack进行整合。在这个文件中,需要引入injectBabelPlugin函数:

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) { 
  // antd按需加载
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  ); 
  return config;
};

3、 修改package.json文件中的启动脚本:因为我们在上面是使用react-app-rewired来取代react-script,所以需要将scripts中的react-scripts全部修改为react-app-rewired

4、 在需要使用组件的地方修改引入方式,实现真正意义上的按需加载:

5、 重启服务

你可能感兴趣的:(基于React中后台UI库:Ant Design)