在Vue项目按需引入Vant组件

1.安装Vant

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

2.安装babel 插件

按照官网上写的，安装babel 插件后，就能在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D

官网上说在.babelrc 中添加配置

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

不过在项目里发现.babelrc文件中还有其他内容

"plugins": ["transform-vue-jsx", "transform-runtime"]

都是字符串，和需要添加的格式不大一样。没关系，直接加在后面就好。加好后的就是这样：

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

3.在页面里引用

import { Button } from 'vant';

官网到这就完了。但是你会发现一运行还是报错，

还得把组件注册一下。

用了Vux组件库的伙伴会习惯这样写

components: { Grid, GridItem }

一运行还是报错，那是因为使用的vux模板已经帮忙处理好了。

而对于Vant正确写法应该是

  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  }

页面完整内容就是

<template>
  <div class="wrapper">
    <van-grid :column-num="3">
      <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"/>
    </van-grid>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";
export default {
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  props: {},
  data() {
    return {};
  },
  methods: {}
};
</script>