样例：
1.创建vue项目，不再详述
2.引入vant
之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我
安装依赖
npm i vant -S
在main.js中引入
import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
3.在页面中使用
官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观
官方文档
我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码：
补充知识：Vant 在vue中 按需引入和全部加载
1. 问题描述：
在vue-cli 2.x 脚手架中练习使用vant组件库, 在main.js用于组件的时候 报错 Vant is not defined
因为我是测试练习vant的 ; demo分为 全部加载 和按需加载两种方式
按需加载
1.首先搭建vue脚手架,
2.下载vant
3. 下载 babel-plugin-import (按需加载使用)
3.当下载好了以后,就可以在 .vue文件中使用了
下载vant: cnpm install vant -S
下载babel-plugin-import: cnpm install babel-plugin-import -S
首先引入: (官方文档):
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
我的写法：
大家可以在计算属性中打印一下你引入的组件,看看里面有什么了
全部加载
第一步: 下载vue脚手架
vue init webpack 项目名;
第二步: 下载vant
cnpm install vant -S
在main.js 中 以引入并使用
import Vant from 'vant' import 'vant/lib/index.css' Vue.use(Vant);
-未修改之前的 .babelrc 文件
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
第三步: 安装babel-plugin-import (这部是按需加载的时候需要用到的,如果你全部引入了 就不需要)
cnpm install babel-plugin-import -S
-在 下载 babel-plugin-import 后修改 .babelrc的文件
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
第四.如果你安装了babel-plugin-import 这个 然后需要把这个卸载掉, 然后重新项目; 在你卸载掉babel-plugin-import 这个的时候 .babelrc这个文件也要恢复到一开始没修改的样子偶(就是上面的''未修改之前的 .babelrc 文件)
cnpm uninstall babel-plugin-import -S
接下来重启项目就应该可以了。
以上这篇vue 使用vant插件做tabs切换和无限加载功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。