文章目录
1、安装 antd-mobile 运行依赖2、安装 react-app-rewired / customize-cra / babel-plugin-import 开发依赖3、在项目根目录创建一个 config-overrides.js 文件并进行如下配置4、修改 package.json 文件中的 scripts 如下：5、组件中引入方式
在使用 create-react-app 创建项目使用 antd-mobile 按需引入组件js 和对应的 css样式，有两种方式：
利用 babel-plugin-import ，这个需要你利用 .babelrc 文件，配置babel插件；[https://mobile.ant.design/docs/react/introduce-cn] ；官网【按需引入】这里有此方法的配置第二种，是需要修改 package.json文件 和 config-overrides.js文件 ；我就是用这种方法配置的；[https://mobile.ant.design/docs/react/use-with-create-react-app-cn]
1、安装 antd-mobile 运行依赖
cnpm install antd-mobile -S
2、安装 react-app-rewired / customize-cra / babel-plugin-import 开发依赖
cnpm i react-app-rewired customize-cra babel-plugin-import -D
由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra； 而且 config-overrides.js文件 文件的配置也不同；
3、在项目根目录创建一个 config-overrides.js 文件并进行如下配置
const { override
, fixBabelImports
} = require('customize-cra');
module
.exports
= override(
fixBabelImports('import', {
libraryName
: 'antd-mobile',
style
: 'css',
}),
);
4、修改 package.json 文件中的 scripts 如下：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
5、组件中引入方式
就 不再需要 引用关于 Ant Design Mobile 中所有或者组件的样式，用哪个组件直接引入就行，例如；
import { Buttom
} from 'antd-mobile'
