vant-ui按需引入

安装插件

#先安装vant-ui
cnpm install vant-ui --save	

# 再安装按需引入的插件
cnpm i babel-plugin-import -D

babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

添加配置

1、在.babelrc中添加配置
注意：webpack 1 无需设置 libraryDirectory

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

2、对于使用 babel7 的用户，可以在 babel.config.js 中配置

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

创建一个plugin文件夹，在plugin中定义一个js文件用来存放代码

之后在建好的js文件中首先导入vue，再导入需要的vant-ui插件，通过vue.use()全局注入。

import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)

最后在main.js中引入

//配置vant
import './plugin/vant'

之后哪里需要使用，就可以直接使用了。