React项目中UI库的使用

一.安装antd

  移动端UI库： npm install antd-mobile --save
  PC端UI库： npm install antd --save

二.引入

**全局引入**

在react的入口文件 index.js 里引入 import 'antd/dist/antd.css'，在组件里引入组件就可以使用了，例如组件里使用 button

   import { Button } from 'antd';
    <Button type="primary">xxx</Button>

逆战班

按需加载

1、yarn add react-app-rewired customize-cra

react-app-rewired 不用弹射就可以配置webpack

customize-cra 自定义脚手架环境

2、package.json

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

3、项目的根目录建立一个配置文件
**config-overrides.js**

4、yarn add babel-plugin-import 下载babel插件,在编译过程中将import的写法自动转换成按需引入的方式

5、config-overrides.js 文件里

           const { override, fixBabelImports } = require('customize-cra');
            module.exports = override(
                   fixBabelImports('import', {
                     libraryName: 'antd',
                     libraryDirectory: 'es',
                     style: 'css',
                   }),
                 );

6、可以自定义主题 less less-loader （如果嫌麻烦可以无视此行代码）

7、可以配置装饰器

7-1)安装：

npm install --save-dev @babel/plugin-proposal-decorators

7-2)在根目录下的config-overrides.js里修改配置

const { addDecoratorsLegacy } = require('customize-cra');addDecoratorsLegacy(),  //装饰器语法

相关推荐：react教程