由于在這上面吃了好多虧，所以想記錄下來(lái)fromhttps://blog.csdn.net/wgydzy/article/details/103988067
1.安裝Vant

# 通過(guò) npm 安裝
npm i vant -S

# 通過(guò) yarn 安裝
yarn add vant

2.安裝babel 插件

按照官網(wǎng)上寫(xiě)的，安裝babel 插件后，就能在編譯過(guò)程中將 import 的寫(xiě)法自動(dòng)轉(zhuǎn)換為按需引入的方式

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

官網(wǎng)上說(shuō)在.babelrc 中添加配置

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

不過(guò)在項(xiàng)目里發(fā)現(xiàn).babelrc文件中還有其他內(nèi)容

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

都是字符串，和需要添加的格式不大一樣。沒(méi)關(guān)系，直接加在后面就好。加好后的就是這樣：

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

3.在頁(yè)面里引用

import { Button } from 'vant';

官網(wǎng)到這就完了。但是你會(huì)發(fā)現(xiàn)一運(yùn)行還是報(bào)錯(cuò)，
哎
還得把組件注冊(cè)一下。

用了Vux組件庫(kù)的伙伴會(huì)習(xí)慣這樣寫(xiě)

components: { Grid, GridItem }

一運(yùn)行還是報(bào)錯(cuò)，那是因?yàn)槭褂玫膙ux模板已經(jīng)幫忙處理好了。

而對(duì)于Vant正確寫(xiě)法應(yīng)該是

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

頁(yè)面完整內(nèi)容就是

<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>

</article>