create-react-app下项目集成Ant Design

注意：这种方式只适用于 create-react-app 创建的项目，如果你适用了 npm run eject 命令后，这种方式可能会出错

一、首先，先创建项目

创建项目：create-react-app on_the_go

启动项目：cd on_the_go

                  npm start

二、集成UI库 Ant Design

1. 基本使用   ==> 引入了全部的组件

安装：npm install antd-mobile --save  

src/index.js 中引入整体css：import 'antd-mobile/dist/antd-mobile.css';

组件中使用：

import React from 'react';

import { Button } from 'antd-mobile';

function App() {
  return (
    <div>
          <Button type='primary'>按钮</Button>
    </div>
  );
}

export default App;

2. 按需引入

2.1 现在依赖包：npm install react-app-rewired customize-cra --save-dev 

                            npm install babel-plugin-import --save-dev

                     react-app-rewired：react-app-rewired的作用就是在不eject的情况下，覆盖create-react-app的配置。即覆盖                                                                 package.json里面的 scripts 

                     babel-plugin-import：主要根据配置实现按需引入三方库， babel-plugin-import 是一个用于按需加载组件代码和样

                                                        式的 babel 插件（原理）

                     customize-cra：必须要有哦！由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

2.2 修改 package.json的默认配置：==>> 替换以前的scripts配置

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

2.3 在项目根目录创建一个 config-overrides.js 用于修改默认配置，代码如下：

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',          // `style: true` 会加载 less 文件
   }),    
);

2.4 去除index.js引入的全局样式

这样，我们就完成了Ant Design的按需引入。

 

注意：Ant Design因版本的不同，按需引入和定制主题的方式也有所不同，请多多参照官方文档

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！