vant在vue2中按需

使用cli3创建一个vue项目，可以使用命令行、或者vue ui可视化界面创建，这里就不再阐述了。

下面记录一下vant在vue项目中的按需引入：

1、npm安装vant（网络有问题的可以使用 cnpm）：
npm i vant@latest-v2 -S

2、按需引入，还需要安装babel-plugin-import插件：
npm i babel-plugin-import -D

3、配置babel-plugin-import插件，这里需要说明一下，以前的学习都是通过cli2.x创建项目，升级3.x后，发现生成的项目中没有.babelrc文件。不过没事，修改babel.config.js文件即可。

初始内容如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

改为：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

4、在main.js中按需引入所需的组件
import { Button } from 'vant'
Vue.use(Button)

5、在template中使用组件即可

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>