目录
  • vue3中Vant的使用
    • 一. 安装Vant组件库
    • 二. 引入组件（推荐）
    • 三. 引入组件
    • 另外还有两种方法
  • vue2，vue3引入vant
    • vue2引入vant
    • vue3引入vant
  • 总结

    vue3中Vant的使用

    一. 安装Vant组件库

    1.通过npm安装

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

    二. 引入组件（推荐）

    在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，推荐安装 unplugin-vue-components 插件，它可以自动按需引入组件

    1.安装插件

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

    2.配置插件

    基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：

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

    三. 引入组件

    完成以上两步，就可以直接使用 Vant 组件了：

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

    另外还有两种方法

    1. 导入所有组件（不推荐）

    Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

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

    2.手动按需引入组件（不推荐）

    在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

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

    这些都是根据官方文档给出的使用方法，详情可见官方 :Vant 3 - Mobile UI Components built on Vue

    vue2，vue3引入vant

    vue2引入vant

    1.npm i vant -S

    2.npm i babel-plugin-import -D

    3.找到后缀名为.babelrc的文件 

    //在原本代码后面补充这段代码
"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
  }]]
}

    4.引入成功后，使用步骤如下 

    <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>

    vue3引入vant 

    npm i vant@next -S

    main.js / main.ts中引入 

    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>

    总结

    以上为个人经验，希望能给大家一个参考，也希望大家多多支持本网站。

    您可能感兴趣的文章:

    • Vue3中使用vant的踩坑实战日记
    • vue3如何使用vant-picker封装省市二级联动
    • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解
    • vue3+ts+vant移动端H5项目搭建的实现步骤