vant-ui 按需引入

Posted 2023-02-20 郭郭郭牧鑫

vant-ui 按需引入

• vant-ui
• 安装插件
• 总结

vant-ui

在我们的Vue学习中vant-ui是一个我们使用频繁的插件，在vant-ui中，按需引入也是我们要注意的一个点

安装插件

先装vant的插件

npm i vant -S

然后装按需引入的插件

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)

另外，若不安装按需引入，我们可以直接在main.js中引入全局

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

但是全局引入，我们还要引入一个懒加载

import Vant,Lazyload from 'vant'; 
// options 为可选参数，无则不传 
Vue.use(Lazyload, options); 
Vue.use(Vant);

如果先安装的按需引入，但是最后想在全局引用的话，在这里还要需要注意的是 ，一定要卸载babel-plugin-import 不然会报错 Vant is not defind；按需引入的配置：你看下是否在.babelrc（或者babel.config）中配置了vant的引入方式，如果有，拿掉就可以全局引入了

总结

按需引入就是安装插件，但是注意的点有很多，避免易错点，就是一个很容易上手的东西