前言:这几天一直在搞vant移动端的组件,遇到了一些问题
1.vant全局引入
npm i vant -S
2.直接在main.js中全局引入
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
3.如果你是想按需引入一定要安装按需加载的配置
1.按需引入
安装babel-plugin-import
npm i babel-plugin-import -D
在.babelrc中配置plugins(插件)
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
在main.js中添加你要引入的
import { Button } from 'vant'
Vue.use(Button)
在这里还要需要注意的是 如果你先是安装的按需引入 想在全局引入的话,一定要卸载babel-plugin-import 不然会报错 Vant is not defind;按需引入的配置:你看下是否在.babelrc(或者babel.config)中配置了vant的引入方式,如果有,拿掉就可以全局引入了
3.在全局引入的一个问题 vant Failed to resolve directive: lazy
项目中全局引入Vant后使用图片懒加载组件会有一个问题,v-lazy自定义指令没有注册
import Vant,{Lazyload} from 'vant';
// options 为可选参数,无则不传
Vue.use(Lazyload, options);
Vue.use(Vant);
因为 Lazyload是 Vue指令使用前需要对指令进行注册
options的参数参考官方文档
https://youzan.github.io/vant/#/zh-CN/lazyload
目前就遇到这些问题,有问题会在改进嘻嘻