使用antd-mobile ui库

时间:2020-05-01

安装插件

npm install antd-mobile --save

按需加载

npm install react-app-rewired@2.0.2-next.0 --save-dev

修改 package.json 里的启动配置

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

在项目根目录创建一个 config-overrides.js 用于修改默认配置

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
};

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

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

测试

import React from 'react';
import {Button} from "antd-mobile";
import './App.css';

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

export default App;