react使用antd mobile

Ant-design框架

        1.  create-react-app antd
        2.  npm install antd-mobile --save
            npm run eject
            如果不成功:  git add . 
                        git commit -m 'init'
                        npm run eject
                        
        3.  修改package.json 
            "babel": {
                "presets": [
                "react-app"
                ],
                "plugins": [
                [
                    "import",
                    {
                    "libraryName": "antd-mobile",
                    "style": "css"
                    }
                ]
                ]
            },         
        4. 在根目录创建 config-overrides.js写入以下内容
            const { override, fixBabelImports } = require('customize-cra');
                module.exports = override(
                fixBabelImports('import', {
                    libraryName: 'antd-mobile',
                    style: 'css',
                })
            );

        5.  全部使用 import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
            按需要引入  
                1.需要安装插件 npm install babel-plugin-import --save-dev
                2.新建  ButtonCom.js 
                以引入button为例:[复制代码演示](https://mobile.ant.design/components/button-cn/)

                3.配置  index.js

            import React from 'react';
            import ReactDOM from 'react-dom';
            import ButtonCom from './ButtonCom'

			ReactDOM.render(
			  <React.StrictMode>
			    <ButtonCom />
			  </React.StrictMode>,
			  document.getElementById('root')
			);	
        6.  执行 yarn start

可以看到目前页面已经有样式了
参考图片

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值