Vant组件使用

y叽里咕噜

于 2022-04-29 11:07:57 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_54030660/article/details/124487835

本文介绍了在Vue 3和Vue 2项目中如何安装Vant组件库。对于Vue 3，使用`npm i vant`进行安装，而Vue 2项目则需安装`vant@latest-v2`。文章不推荐全部引入Vant组件，而是建议局部引入。在局部引入时，首先通过`yarn add vant -D`添加依赖，若遇到yarn安装问题，需检查并安装yarn。接着在main.js中导入所需组件，并在具体Vue组件中按官方代码示例使用。

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

组件的安装

# Vue 3 项目，安装最新版 Vant
npm i vant

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

查看vue的版本，在根目录的 package.js里面

 "dependencies": {
    "core-js": "^3.8.3",
    "vant": "^2.12.47",
    "vue": "^2.6.14",   //这个是版本
    "vue-router": "^3.5.1"
  },

组件的引入和使用

全部引入（不推荐使用）

下载vant组件库到当前项目中

yarn add vant -D

如果安装yarn报错

那就打开cmd检查是否安装yarn

没有的话就安装一下，安装代码是

npm install -g yarn

导入所有组件到main.js中

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);

局部组件引入和使用

在main.js中写入这俩个

// vant组件引入
import { Button } from 'vant'
// 这个是样式引入，可以修改样式
import 'vant/lib/index.css'

使用

然后在所需要的vue组件中写入官方中的代码，例如

<div class="box">
    <span>心脏都不在中间</span>
    <!-- 控制图标大小要在这里写，外面写的大小不管用 -->
    <van-icon class="love" name="like-o" size="25px" />
    <van-button class="a" type="primary">主要按钮</van-button>
  </div>