前言
这个问题很奇葩，网上也有很多人，给了很多方法，但是我想说的是，那些方法我用了都没效果，我试了一些都没效果，因为我当时引入时报错说没有export default出来，但是一旦暴露出来就又出其他问题，还是比较蛋疼的，所以还是直接自己研究了下,因为一边学一边弄，所以就先写个大概的,如果不理解请在评论中指出,或者私信,我会在后面重构。
正文
封装的页面上该用vant的组件就用vant的组件，也不用引入，直接写就好了，只需要在调用的页面的main.json中去引入vant的组件即可
封装的页面
<template> ???<van-popup class="game-rules custom" :show="showRules"> ??????????</van-popup></template><script> ???export default { ???????data() { ???????????return { ???????????????showRules: false, ???????????} ???????}, ???????methods: { ???????????openRules() { ???????????????this.showRules = true; ???????????}, ???????????clickBtn() { ???????????????this.showRules = false; ???????????} ???????}, ???}</script><style lang="less" scoped> ???.van-popup.game-rules { ???????color: #fff; ???????font-size: 12px; ???????.top-header { ???????????top: -50px; ???????????img { ???????????????width: 216px; ???????????} ???????} ???????.first { ???????????width: 100%; ???????????height: 42px; ???????????border-radius: 8px; ???????????background: linear-gradient(to bottom, #F47979, #E54444); ???????} ???????.second { ???????????width: calc(100% - 30px); ???????????box-sizing: border-box; ???????????margin: 0 auto; ???????????padding: 16px 14px; ???????????padding-right: 10px; ???????????background: linear-gradient(to bottom, #F86D6D, #E13333); ???????????border-radius: 0 0 8px 8px; ???????????.detail { ???????????????text-align: left; ???????????????margin-bottom: 16px; ???????????} ???????????.detail-title { ???????????????margin-top: 8px; ???????????????margin-bottom: 8px; ???????????????font-weight: bold; ???????????????img { ???????????????????width: 15px; ???????????????????height: 15px; ???????????????????margin-right: 5px; ???????????????????vertical-align: text-top; ???????????????} ???????????} ???????????.detail-item { ???????????????line-height: 1.3; ???????????} ???????} ???????.title { ???????????font-size: 16px; ???????} ???????.hint { ???????????color: rgba(255,255,255,0.5); ???????????font-size: 10px; ???????????margin-top: 15px; ???????} ???????.iknow { ???????????font-size: 15px; ???????????width: 75px; ???????????height: 30px; ???????????line-height: 30px; ???????} ???}</style>调用的页面
main.json引入vant
mpvue——componets中引入vant组件
原文地址：https://www.cnblogs.com/wangyang0210/p/10449915.html