vue3 引入Vant组件库

 最近在学习vue3.0，引入Vant组件库时，遇到一些问题，所以在vue3中不要按照vue2的格式去引入组件库，不然容易出现错误。

  目前Vant 3 是基于 Vue 3 开发的，在使用 Vant 3 前，请将项目中的 Vue 升级到 3.0 以上版本。

错误示例

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
createApp(App).use(store).use(router).mount('#app')

上面引入会出现这种情况，所以要按照Vue3.0的格式去使用

正确示例( 引入 ) 

通过npm安装

npm i vant@next -S

通过yarn安装

yarn add vant@next

挂载在main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';
createApp(App).use(store).use(router).use(Vant).mount('#app')

在组件中使用

<template>
  <div class="search">
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style></style>

这样就大功告成啦！！！

如果觉得不错点一个赞，不妨分享给其他正在学习路上的小伙伴。