vue3中使用移动端组件库vant3

vant3中文文档https://vant-contrib.gitee.io...
介绍：
关于vue项目的创建前面文章有介绍
vant的安装可以 npm install vant、或者使用vue ui 进行安装
今天开始使用vant开始自己的移动端开发
引入

//我选择了全局安装。引入
import Vant from 'vant';
import 'vant/lib/index.css'

安装
在以前的vue中你可能会想到使用Vue.use(Vant)
在新版本的vue中修改为createApp(App).use(Vant).mount('#app')
{安装X，路由等插件可以链式插入：createApp(App).use(store).use(router).use(Vant).mount('#app')}
安装babel
npm i babel-plugin-import -D
进行智能打包，也就是使用了什么就打包什么，避免包体积过大的问题

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

**这样就算是安装完事了
这里是一段示例代码去试试吧**

<template>
<div id="app">
 <van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>
 <van-button type="info">信息按钮</van-button>
 <van-button type="warning">警告按钮</van-button>
 <van-button type="danger">危险按钮</van-button>
</div>
</template>

<script>
import { Button } from 'vant';
export default {
  components: {
    [Button.name]: Button
  }
}
</script>

<style >
#app{
  width: 100%;
  height: 100%; 
}
</style>