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:必须要有哦!由于新的 [email protected] 版本的关系,你需要还需要安装 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因版本的不同,按需引入和定制主题的方式也有所不同,请多多参照官方文档
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!