【React.js 05】antd-mobile的使用

结合前面所说的，我们使用create-react-app脚手架去创建项目后，一些已有的组件就可以帮助我们少写CSS,这里我们讲解antd-mobile组件库，详情可看官网。

怎么去使用antd-mobile，我不想多做太详细的描述，因为官网上介绍的很详细，我就对几个地方说明一下：

• 安装

npm install antd-mobile --save

• 使用

import { Button } from 'antd-mobile'

这一步问题来了，你会发现，import进去的Button没有样式，因为我们需要把css一并引入。
嫌麻烦？
官网给你简单的方法：按需加载。

• 按需加载
  使用 babel-plugin-import（推荐）。

但是！！！

别急着按照官网说的去rewired，我们直接修改package.json文件一样可以实现效果，并且简单的多。

首先：

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

然后：
打开package.json文件，找到：

  "babel": {
    "presets": [
      "react-app"
    ]
  },

加入配置，写出这样：

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
    ]
  },

这样就好了，在你想用组件的地方去import组件就好，样式什么的，不用管了。
至于怎么用组件，去官方文档里面看，都讲得很清楚，也有案例代码。