前端
一点也不简单

React中使用Ant Design Mobile组件库

Ant Design https://ant.design/index-cn 是蚂蚁金服团队开发的一套组件库

Ant Design组件库的特点

  • 完美适用于 vue react angular三大框架的组件库
  • 当今最流行的组件库

Ant Design 的使用

在官网底部找到为react专门使用的那一套—- Ant Design Mobile

  • 1.先生产安装Ant Design
yarn add antd-mobile
  • 解决react使用ant design的坑

项目根目录建立config-overrides.js来覆盖webpack,或者yarn eject进行抽离,我这里用第一种

先开发环境安装着两个依赖

yarn add react-app-rewired customize-cra -D
yarn add babel-plugin-import -D

config-overrides.js 文件配置

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

根目录引入css

import 'antd-mobile/dist/antd-mobile.css'

App.js文件里测试

import { Button } from 'antd-mobile'

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

完美解决

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » React中使用Ant Design Mobile组件库

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏