VUE3.0引入vant组件库
VUE3.0引入vant组件库引入通过 npm 安装通过 yarn 安装组件挂载组件使用目前Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。引入通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn安装通过 npm 安装npm i vant@next -S通过 yarn 安装yarn add vant@next
·
目前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>
更多推荐
已为社区贡献2条内容
所有评论(0)