https://www.cnblogs.com/han-1034683568/p/13875663.html
本文将采用 Vite 创建项目，毕竟人家尤大辛辛苦苦写的一个打包工具，在非生产环境下，我们尽量去把玩最新的东西（不学是不可能的）。
我们按照官方文档给的教程来初始化项目，这里安利一个国内加速版的中文文档，官方给的中文版网址貌似是部署在国外的服务器，国内打开非常非常慢，十分影响学习。

使用vite安装vue3

使用 NPM：

  1. npm init vite-app vant-v3
  2. cd vant-v3
  3. npm install
  4. npm run dev

使用 yarn：

  1. yarn create vite-app vant-v3
  2. cd vant-v3
  3. yarn
  4. yarn dev

个人比较喜欢使用 yarn，因为比较快，喜欢 npm 的同学，建议添加淘宝镜像，用 cnpm 安装，同样也很快。

添加Vant UI库

第一步肯定是安装啦，代码如下：

  1. yarn add vant@next -S

添加之后，我们再添加按需引入的插件（推荐使用按需引入，减少代码提及）：

  1. yarn add babel-plugin-import -D

在项目根目录添加 babel.config.js 如下所示：

  1. module.exports = {
  2.   plugins: [
  3.     ['import', {
  4.       libraryName: 'vant',
  5.       libraryDirectory: 'es',
  6.       style: true
  7.     }, 'vant']
  8.   ]
  9. }

使用Vant

关键是app.use(Button)，vant是个插件，要全局注册
在view中直接使用
不用在components中声明

  1. export default {
  2.   name: 'App',
  3.   components: {
  4.     HelloWorld,
  5.     //Button, # 不用在这里再声明
  6.   }
  7. }

在 main.js 内引入一个组件，代码如下：

  1. import { createApp } from 'vue'
  2. import { Button } from 'vant';
  3. import App from './App.vue'
  4. import router from './router'
  5. import 'vant/lib/index.css'; // 全局引入样式
  6. import './index.css'
  8. const app = createApp(App) // 创建实例
  10. app.use(Button) // 注册组件
  11. app.use(router)
  14. app.mount('#app')

在 src/views/Home.vue 随便添加一个组件，代码如下：

  1. <template>
  2.   <div>我是十四</div>
  3.   <van-button type="primary" size="large">大号按钮</van-button>
  4. </template>
  5. <script>
  6. export default {
  7. }
  8. </script>

此时，刷新浏览器，效果如下图所示：