Vant安装及必坑

 vant官网地址

 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

1.通过npm安装:

注意vue2和vue3不同,版本过高会报错

vue2

npm i vant@latest-v2

或者

npm i vant -S


vue3 

npm i vant

或者

npm i vant@next -S

 备注:若报错 Cannot read properties of null (reading 'isDescendantOf') 

 解决:

  • 方法二:删除已有的 node_modules,重新安装Vant ,执行命令 npm i vant

  • 或者执行npm uninstall vant再重新安装对应版本号

2.在 main.js 中加载注册 Vant 组件  (下面为全局导入方式) 

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

3.使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
 
<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

猜你喜欢

转载自blog.csdn.net/weixin_43923808/article/details/131772409