React组件库的使用

React引入组件库

1. 组件库
   • 通常使用蚂蚁金服开发的组件库 ant design 官网往下拉底部左边前两个是react的组件库 PC和移动端
2. 安装使用
   • $ npm i antd-mobile -D下载安装
   • 引入 react-app-rewired 并修改 package.json 里的启动配置。
     $ npm install react-app-rewired customize-cra --save-dev
   • 修改package.json里面的配置
     

       /* 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 --env=jsdom",
       +   "test": "react-app-rewired test --env=jsdom",
       }
   

   • 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
     
   • 使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
     
     $ npm install babel-plugin-import --save-dev

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

   • 使用 import { Button } from ‘antd-mobile’;