由于在这上面吃了好多亏，所以想记录下来fromhttps://blog.csdn.net/wgydzy/article/details/103988067
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>
</article>
