vant在vue/cli3中局部引入

因为官网的文档是给微信小程序的，所以记录一下。
要注意一下webstorm自动生成的vue模板是vue/cli3，很多教程里面说的是改.babelrc，但是这个是2.x版本的，3.0应该是直接在babel.config.js下面改就行了。注释的部分是本来的部分。

// module.exports = {
//   presets: [
//     '@vue/cli-plugin-babel/preset'
//   ]
// }
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // vant引入：
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

然后在main.js里面引用。

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

然后组件里不需要再额外注册。注意template中只能有一个div包裹全部，template本身不是一个封闭的标签，否则会报错。

<template>
  <div class="hello">
    {{msg}}

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

<script>
export default {

  name: 'index',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

参考：https://juejin.im/post/5e7f549d6fb9a03c6c18f0f1
但是如果引入多了都放在main.js中应该不好看，所以改成一个单独的组件中，只需要在main.js中引入import '@/components/Vant'，然后在components下面创建一个vant的组件，然后引入：

import Vue from 'vue'

// https://youzan.github.io/vant/#/zh-CN/home
import {
    Button,
    Toast,
    Dialog,
    Field,
    Form,
    Notify,
    Cell,
    CellGroup,
    NavBar,
    Search,
    Image,
    Lazyload,
    Swipe,
    SwipeItem,
    Loading,
    Tag,
    CountDown,
    Tabbar,
    TabbarItem,
    List,
    PullRefresh,
    TreeSelect,
    Icon,
    Progress,
    ImagePreview,
    Rate,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton,
    Sku,
    AddressList,
    AddressEdit,
    SwipeCell,
    Card,
    SubmitBar,
    Checkbox,
    CheckboxGroup,
    Grid,
    GridItem,
    DropdownMenu,
    DropdownItem,
    ContactCard,
    ContactList,
    ContactEdit
} from 'vant'

Vue.use(Toast)
    .use(Dialog)
    .use(Notify)
    .use(Field)
    .use(Form)
    .use(Button)
    .use(Cell)
    .use(CellGroup)
    .use(NavBar)
    .use(Search)
    .use(Image)
    .use(Lazyload)
    .use(Swipe)
    .use(SwipeItem)
    .use(Loading)
    .use(Tag)
    .use(CountDown)
    .use(Tabbar)
    .use(TabbarItem)
    .use(List)
    .use(PullRefresh)
    .use(TreeSelect)
    .use(Icon)
    .use(Progress)
    .use(ImagePreview)
    .use(Rate)
    .use(GoodsAction)
    .use(GoodsActionIcon)
    .use(GoodsActionButton)
    .use(Sku)
    .use(AddressList)
    .use(AddressEdit)
    .use(SwipeCell)
    .use(Card)
    .use(SubmitBar)
    .use(Checkbox)
    .use(CheckboxGroup)
    .use(Grid)
    .use(GridItem)
    .use(DropdownMenu)
    .use(DropdownItem)
    .use(ContactCard)
    .use(ContactList)
    .use(ContactEdit)