Vue项目如何安装引入使用Vant
作者：SuperYiY
Vant是一个专为移动端设计的轻量级组件库,自2017年开源以来,提供了Vue2、Vue3及多平台版本支持,安装Vant时需要注意版本兼容问题,Vue3项目应安装最新版Vant3,而Vue2项目则需安装Vant2,安装错误时,需卸载后重新安装正确版本
前言
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本
Vue3安装
npm install vant --save
安装为Vant的最新版，与Vue3适配；而是vue2项目需指定版本号为v2，否则会出错
若出错需要卸载 npm uninstall vant ，重新安装
Vue2安装
@ 指定最新的版本号
npm i vant@latest-v2 -S
main引入
在main.js文件中
1、全局全部引入：
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Antd);
// 根据本地localStorage存储的当前语言类型，切换不同语言
import zhCN from 'vant/es/locale/lang/zh-CN'
import enUS from 'vant/es/locale/lang/en-US'
let lang = localStorage.getItem('lang') || 'zh_CN'
if (lang === 'en') {
Locale.use('en-US', enUS)
} else {
Locale.use('zh-CN', zhCN)
}2、全局按需引入：
- 在src目录创建plugins文件夹
- 文件夹中创建vant.js文件做引入操作，
import Vue from 'vue'
// 在这里引入你所需的组件
import {
Button,
Cell,
CellGroup,
Icon
// 。。。
} from 'vant'
// 按需引入UI组件
Vue.use(Button)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Icon)
// 。。。- 将这个文件在man.js内引入
import Vue from 'vue'
import App from './App.vue'
import '@/plugins/vant'
// 其他操作...
new Vue({
router,
render: h => h(App),
}).$mount('#app')简单使用
例子：vant折叠面板
<div class="result-list">
<van-row class="list-status">
<van-col span="12"><span class="status-name"></span></van-col>
<van-col span="3"><span class="status-name">列名1</span></van-col>
<van-col span="3"><span class="status-name">列名2</span></van-col>
<van-col span="3"><span class="status-name">列名3</span></van-col>
<van-col span="3"><span class="status-name">列名4</span></van-col>
</van-row>
<div class="list-content">
<van-collapse v-model="activeNames" :accordion="true">
<van-collapse-item
class="content-item"
:name="item.schoolClassId"
v-for="(item, index) in list"
:key="index"
>
<template #right-icon>
<van-icon
class="item-icon"
:name="
activeNames == item.schoolClassId ? 'arrow-down' : 'arrow'
"
@click.native="showDetail = true"
/>
</template>
<template slot="title">
<van-row
class="item-title"
@click.stop.prevent="onclickItem(item)"
>
<van-col span="2">
<div class="list-item-title">
<img
class="title-icon"
src="../../assets/images/xxx.png"
alt="icon"
/>
</div>
</van-col>
<van-col span="10">
<div class="list-item-title de-list-title-big">
{{ item.className }}
</div>
</van-col>
<van-col span="3">
<div class="list-item-title">{{ item.notSubmitted }}</div>
</van-col>
<van-col span="3">
<div class="list-item-title">{{ item.positiveNum }}</div>
</van-col>
<van-col span="3">
<div class="list-item-title">
{{ item.positivePercentage }}
</div>
</van-col>
<van-col span="3">
<div class="list-item-title success-result">
{{ item.totalNumber }}
</div>
</van-col>
</van-row>
</template>
<div class="item-detail" v-if="showDetail">
<van-row>
<van-col span="6">
<div class="item-content">下拉内容1</div>
<div class="item-date">
{{ item.content }}
</div>
</van-col>
<van-col span="6">
<div class="item-content">下拉内容2</div>
<div class="item-date">
{{ item.content }}
</div>
</van-col>
<van-col span="6">
<div class="item-content">下拉内容3</div>
<div class="item-date">
{{ item.content }}
</div>
</van-col>
<van-col span="6">
<div class="item-content">下拉内容4</div>
<div class="item-date">
{{ item.content }}
</div>
</van-col>
</van-row>
</div>
</van-collapse-item>
</van-collapse>
</div>
</div>
这里是引用
<style lang="less" scoped>
.result-list {
min-height: 520px;
padding: 17px;
background-color: #c2e2ff;
position: relative;
}
.list-status {
float: right;
height: 24px;
width: 100%;
font-size: 12px;
text-align: start;
margin-right: 20px;
/* line-height: 12px; */
color: RGBA(0, 0, 0, 0.4);
}
// 整个底部列表
.list-content {
clear: both;
// border: 1px solid red;
}
// 整个item（包括title和detail）
.content-item {
margin-bottom: 10px;
border-radius: 10px;
overflow: hidden;
}
.item-icon {
align-self: center;
}
// 每一项的item的title
.item-title {
// border: 1px solid red;
text-align: start;
font-size: 14px;
font-weight: 500;
color: #f36292;
}
.list-item-title {
// border: 1px solid yellow;
height: 36px;
line-height: 36px;
position: relative;
}
.title-icon {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 每一项的item的detail
.item-detail {
// border: 1px solid red;
padding-top: 10px;
text-align: center;
.item-content {
font-size: 12px;
font-weight: 400;
color: RGBA(0, 0, 0, 0.4);
}
.item-date {
margin-top: 10px;
color: #f36292;
}
.van-col:nth-child(4) .item-date {
color: #9ba7b0;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。