Vue项目如何安装引入使用Vant

2024-11-3 10:33| 发布者: 284cc| 查看: 60| 评论: 0

摘要: 目录媒介Vue3安装Vue2安装main引入简单使用总结媒介 Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。现在 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝

媒介

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

现在 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

Vue3安装

[code]npm install vant --save [/code]

安装为Vant的最新版，与Vue3适配；而是vue2项目需指定版本号为v2，否则会出错

若出错须要卸载 [code]npm uninstall vant[/code] ，重新安装

Vue2安装

[code]@[/code] 指定最新的版本号

[code]npm i vant@latest-v2 -S[/code]

main引入

在main.js文件中

1、全局全部引入：

[code]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) }[/code]

2、全局按需引入：

在src目录创建plugins文件夹
文件夹中创建vant.js文件做引入操作，

[code]import Vue from 'vue' // 在这里引入你所需的组件 import { Button, Cell, CellGroup, Icon // 。。。 } from 'vant' // 按需引入UI组件 Vue.use(Button) Vue.use(Cell) Vue.use(CellGroup) Vue.use(Icon) // 。。。[/code]

将这个文件在man.js内引入

[code]import Vue from 'vue' import App from './App.vue' import '@/plugins/vant' // 其他操作... new Vue({ router, render: h => h(App), }).$mount('#app')[/code]

简单使用

例子：vant折叠面板

[code] <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> [/code]

这里是引用

[code]<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>[/code]

总结

以上为个人履历，渴望能给各人一个参考，也渴望各人多多支持脚本之家。

来源：https://www.jb51.net/javascript/328929j2u.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Vue.js使用this.$confirm换行显示提示信息实例下一篇：Vue项目之安装引入使用vconsole方式(生产环境不显示)

账号		自动登录	找回密码
密码			立即注册

Vue项目如何安装引入使用Vant

目录

媒介

Vue3安装

Vue2安装

main引入

简单使用

总结

相关分类

站长推荐 /6