VUE3.0引入vant组件库

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

引入

通过 npm 安装
在现有项目中使用 Vant 时，可以通过npm或yarn安装

通过 npm 安装

npm i vant@next -S

通过 yarn 安装

yarn add vant@next

组件挂载

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import Vant from 'vant';
import 'vant/lib/index.css';

createApp(App).use(Vant).mount('#app')

组件使用

<template>
	<h1>test count: {{count}}</h1>
	<button @click="add">add</button>
	<van-button type="primary" size="large" url="/vant/mobile.html">URL 跳转</van-button>
	<van-button size="large" @click="print">print</van-button>
</template>

<script>
	import { ref } from 'vue'
	
	export default {
	  setup() {
	    const count = ref('1212')
	    const add = () => {
	      count.value++
	    }
	    const print = () => {
	      console.log(count.value)
	      console.log(import.meta.env.MODE)
	    }
	    return {
	      count,
	      add,
	      print
	    }
	  }
	}
</script>