vue项目中安装和使用vant组件

最近使用 vue 在开发微信公众号内嵌 H5 页面，采用一些组件可快速提高开发效率。vant 是一款基于 Vue 构建的移动 UI 组件（https://youzan.github.io/vant…），提供非常友好的 API 开发文档及可视化页面，接下来在 vue-cli 构建的项目中安装和使用

1. 进入项目目录运行安装命令
npm i vant -S

安装成功后，在 package.json 中可以看到依赖

  "dependencies": {
    ...
    "vant": "^2.0.9", 
    ...
  }

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

3. 在.babelrc 文件中配置 plugins（插件）

 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "import",
      [
        {
          "libraryName": "vant",
          "style": true
        }
      ]
    ]
  ]

4. 按需要引入 vant 组件，比如我们要在 index.vue 组件中使用 Button 组件，我们可以先在组件中引入

<template>
  <van-button type="default">Default</van-button>
  <van-button type="primary">Primary</van-button>
</template>

<script>
  import {Button} from 'vant'
  
  export default {
    components: {[Button.name]: Button
    }
  }
</script>  

5. 若多个页面用到同一个组件，可以在 main.js 中全局引入

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