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

葉子紅了

前言

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

• Vue3使用Vant3
  
• Vue2使用Vant2
  

Vue3安装

1. npm install vant --save

复制代码

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

1. npm uninstall vant

复制代码

，重新安装

Vue2安装

1. @

复制代码

指定最新的版本号

1. npm i vant@latest-v2 -S

复制代码

main引入

在main.js文件中
1、全局全部引入：

1. import Vant from 'vant';
   
2. import 'vant/lib/index.css';
   
3. Vue.use(Antd);
   
4. 
   
5. // 根据本地localStorage存储的当前语言类型，切换不同语言
   
6. import zhCN from 'vant/es/locale/lang/zh-CN'
   
7. import enUS from 'vant/es/locale/lang/en-US'
   
8. let lang = localStorage.getItem('lang') || 'zh_CN'
   
9. if (lang === 'en') {
   
10.   Locale.use('en-US', enUS)
    
11. } else {
    
12.   Locale.use('zh-CN', zhCN)
    
13. }

复制代码

2、全局按需引入：

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

1. import Vue from 'vue'
   
2. // 在这里引入你所需的组件
   
3. import {
   
4.     Button,
   
5.     Cell,
   
6.     CellGroup,
   
7.     Icon
   
8.     // 。。。
   
9. } from 'vant'
   
10. 
    
11. // 按需引入UI组件
    
12. Vue.use(Button)
    
13. Vue.use(Cell)
    
14. Vue.use(CellGroup)
    
15. Vue.use(Icon)
    
16.         // 。。。

复制代码

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

1. import Vue from 'vue'
   
2. import App from './App.vue'
   
3. import '@/plugins/vant'
   
4. 
   
5. // 其他操作...
   
6. 
   
7. new Vue({
   
8.   router,
   
9.   render: h => h(App),
   
10. }).$mount('#app')

复制代码

简单使用

例子：vant折叠面板

1.         <div class="result-list">
   
2.           <van-row class="list-status">
   
3.             <van-col span="12"><span class="status-name"></span></van-col>
   
4.             <van-col span="3"><span class="status-name">列名1</span></van-col>
   
5.             <van-col span="3"><span class="status-name">列名2</span></van-col>
   
6.             <van-col span="3"><span class="status-name">列名3</span></van-col>
   
7.             <van-col span="3"><span class="status-name">列名4</span></van-col>
   
8.           </van-row>
   
9.           <div class="list-content">
   
10.             <van-collapse v-model="activeNames" :accordion="true">
    
11.               <van-collapse-item
    
12.                 class="content-item"
    
13.                 :name="item.schoolClassId"
    
14.                 v-for="(item, index) in list"
    
15.                 :key="index"
    
16.               >
    
17.                 <template #right-icon>
    
18.                   <van-icon
    
19.                     class="item-icon"
    
20.                     :name="
    
21.                       activeNames == item.schoolClassId ? 'arrow-down' : 'arrow'
    
22.                     "
    
23.                     @click.native="showDetail = true"
    
24.                   />
    
25.                 </template>
    
26.                 <template slot="title">
    
27.                   <van-row
    
28.                     class="item-title"
    
29.                     @click.stop.prevent="onclickItem(item)"
    
30.                   >
    
31.                     <van-col span="2">
    
32.                       <div class="list-item-title">
    
33.                         <img
    
34.                           class="title-icon"
    
35.                           src="../../assets/images/xxx.png"
    
36.                           alt="icon"
    
37.                         />
    
38.                       </div>
    
39.                     </van-col>
    
40.                     <van-col span="10">
    
41.                       <div class="list-item-title de-list-title-big">
    
42.                         {{ item.className }}
    
43.                       </div>
    
44.                     </van-col>
    
45.                     <van-col span="3">
    
46.                       <div class="list-item-title">{{ item.notSubmitted }}</div>
    
47.                     </van-col>
    
48.                     <van-col span="3">
    
49.                       <div class="list-item-title">{{ item.positiveNum }}</div>
    
50.                     </van-col>
    
51.                     <van-col span="3">
    
52.                       <div class="list-item-title">
    
53.                         {{ item.positivePercentage }}
    
54.                       </div>
    
55.                     </van-col>
    
56.                     <van-col span="3">
    
57.                       <div class="list-item-title success-result">
    
58.                         {{ item.totalNumber }}
    
59.                       </div>
    
60.                     </van-col>
    
61.                   </van-row>
    
62.                 </template>
    
63.                 <div class="item-detail" v-if="showDetail">
    
64.                   <van-row>
    
65.                     <van-col span="6">
    
66.                       <div class="item-content">下拉内容1</div>
    
67.                       <div class="item-date">
    
68.                         {{ item.content }}
    
69.                       </div>
    
70.                     </van-col>
    
71.                     <van-col span="6">
    
72.                       <div class="item-content">下拉内容2</div>
    
73.                       <div class="item-date">
    
74.                         {{ item.content }}
    
75.                       </div>
    
76.                     </van-col>
    
77.                     <van-col span="6">
    
78.                       <div class="item-content">下拉内容3</div>
    
79.                       <div class="item-date">
    
80.                         {{ item.content }}
    
81.                       </div>
    
82.                     </van-col>
    
83.                     <van-col span="6">
    
84.                       <div class="item-content">下拉内容4</div>
    
85.                       <div class="item-date">
    
86.                         {{ item.content }}
    
87.                       </div>
    
88.                     </van-col>
    
89.                   </van-row>
    
90.                 </div>
    
91.               </van-collapse-item>
    
92.             </van-collapse>
    
93.           </div>
    
94.         </div>

复制代码

这里是引用

1. <style lang="less" scoped>
   
2. .result-list {
   
3.   min-height: 520px;
   
4.   padding: 17px;
   
5.   background-color: #c2e2ff;
   
6.   position: relative;
   
7. }
   
8. .list-status {
   
9.   float: right;
   
10.   height: 24px;
    
11.   width: 100%;
    
12.   font-size: 12px;
    
13.   text-align: start;
    
14.   margin-right: 20px;
    
15.   /* line-height: 12px; */
    
16.   color: RGBA(0, 0, 0, 0.4);
    
17. }
    
18. 
    
19. // 整个底部列表
    
20. .list-content {
    
21.   clear: both;
    
22.   // border: 1px solid red;
    
23. }
    
24. // 整个item（包括title和detail）
    
25. .content-item {
    
26.   margin-bottom: 10px;
    
27.   border-radius: 10px;
    
28.   overflow: hidden;
    
29. }
    
30. .item-icon {
    
31.   align-self: center;
    
32. }
    
33. // 每一项的item的title
    
34. .item-title {
    
35.   // border: 1px solid red;
    
36.   text-align: start;
    
37.   font-size: 14px;
    
38.   font-weight: 500;
    
39.   color: #f36292;
    
40. }
    
41. .list-item-title {
    
42.   // border: 1px solid yellow;
    
43.   height: 36px;
    
44.   line-height: 36px;
    
45.   position: relative;
    
46. }
    
47. .title-icon {
    
48.   width: 20px;
    
49.   height: 20px;
    
50.   position: absolute;
    
51.   top: 50%;
    
52.   left: 50%;
    
53.   transform: translate(-50%, -50%);
    
54. }
    
55. // 每一项的item的detail
    
56. .item-detail {
    
57.   // border: 1px solid red;
    
58.   padding-top: 10px;
    
59.   text-align: center;
    
60.   .item-content {
    
61.     font-size: 12px;
    
62.     font-weight: 400;
    
63.     color: RGBA(0, 0, 0, 0.4);
    
64.   }
    
65.   .item-date {
    
66.     margin-top: 10px;
    
67.     color: #f36292;
    
68.   }
    
69.   .van-col:nth-child(4) .item-date {
    
70.     color: #9ba7b0;
    
71.   }
    
72. }
    
73. </style>

复制代码

总结

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

来源:https://www.jb51.net/javascript/328929j2u.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！