react使用antd mobile

向右看齐 2021-07-25 13:29 481阅读 0赞

## 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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/1cc3e8aa62774523beb41b9d0ebdeae4.png