react antd的使用

antd的使用

  • antd是一个组件库
  • 安装antd
    $ npm install antd
    
  • 安装babel-plugin-import 按需加载的插件,用来引入css
    $ npm install babel-plugin-import
    
  • 暴露配置文件
    $ npm run eject
    

    注意:如果报git错误,就执行git add * 和git commit操作即可

  • 修改配置文件,在webpack.config.js文件下的options.plugins下加入下边配置
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }],
    
  • 组件的引入,解构赋值方式
    import {Button, DatePicker} from 'antd' // 解构赋值的方式引入
    class App extends Component {
    render() {
      return (
        <div className="App">
          <Button>默认</Button>
          <Button type="primary">primary</Button>
          <DatePicker></DatePicker>
        </div>
      );
    }
    }
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容