（填坑篇）Vue3.0全局引入Vant组件

最新推荐文章于 2025-07-01 10:14:06 发布

风生晚凉

最新推荐文章于 2025-07-01 10:14:06 发布

阅读量7.8k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：前端 Javascript 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a1037949156/article/details/123244368

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

Javascript

2 篇文章

订阅专栏

本文档介绍了如何将Vant UI库安装并应用到Vue项目中。通过npm安装 vant，然后在main.js中引入 vant 和其样式文件。接着在main.js中配置并挂载Vue应用。最后展示了在Vue组件中使用Vant按钮的例子，包括各种类型的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，上步骤

1. 安装vant

npm i vant

2. main.js里面引用相关资源

import vant from 'vant';
import 'vant/lib/index.css';

3. main.js里面的完整代码如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import vant from 'vant';
import 'vant/lib/index.css';

createApp(App).use(router).use(vant).mount('#app')

4. 然后就可以直接在vue文件里面使用啦，比如像这个一样：

<template>
  <div class="hello">
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <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>