vue3中Vant的使用及说明

# Vue 3 项目，安装最新版 Vant
npm i vant
 
# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

# 通过 npm 安装
npm i unplugin-vue-components -D
 
# 通过 yarn 安装
yarn add unplugin-vue-components -D
 
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
 
module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

import { createApp } from 'vue';
import { Button } from 'vant';
 
const app = createApp();
app.use(Button);

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
const app = createApp();
app.use(Vant);

// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件，则无须引入
import 'vant/es/button/style/index';

//在原本代码后面补充这段代码
"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
 
 
 
//补充完后效果
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import", {
    "libraryName": "vant",
    "libraryDirectory": "es",
    "style": true
  }]]
}

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="go">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>
 
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
  name: 'Home',
  methods:{
    go(){
      this.$router.push("/about");
    }
  },
  components:{
    "van-button":Button
  }
}
</script>

npm i vant@next -S

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

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="go">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>
 
<script>
// @ is an alias to /src
import { Button } from 'vant';
export default {
  name: 'Home',
  methods:{
    go(){
      this.$router.push("/about");
    }
  }
}
</script>