vant使用官网代码之后,不显示的bug

比如这个是vant官网复制的

下拉菜单

通过以下方式来全局注册组件

import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

const app = createApp();
app.use(DropdownMenu);
app.use(DropdownItem);

vue模板内容

<van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="筛选" ref="item">
    <van-cell center title="包邮">
      <template #right-icon>
        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <van-cell center title="团购">
      <template #right-icon>
        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
      </template>
    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round @click="onConfirm">
        确认
      </van-button>
    </div>
  </van-dropdown-item>
</van-dropdown-menu>

vue<Script/>内容

import { ref } from 'vue';

export default {
  setup() {
    const item = ref(null);
    const value = ref(0);
    const switc
    h1 = ref(false);
    const switch2 = ref(false);
    const options = [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ];
    const onConfirm = () => {
      item.value.toggle();
    };

    return {
      item,
      value,
      switch1,
      switch2,
      options,
      onConfirm,
    };
  },
};

我们按照步骤复制发现,页面之中并未显示组件,或者组件有残缺(笔者是用按需引入做的)
坑1:在vue模板内容中的第二行;官网的option写错了.将option改为options才能正确显示;
坑2:代码用到了van-switch和van-cell组件,但是引入时却没有提示,只要在入口文件补充引入这两个组件即可
坑3:babel.config.js之中没有配置vant

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

坑4:待议,欢迎评论