vant 里面找不到轮播图_vue按需引入vant(手机轮播图为例)

配置需要2步,使用需要一步3个地方,_;一共三步

1.1 通过 npm 安装

npm i vant -S

1.2通过 yarn 安装

yarn add vant

可以在package.json中搜索vant 确实是否安装成功(一般是没什么问题的)

第二步安装插件

npm i babel-plugin-import -D

这时候在你的根目录下(和nodemodules等同级的目录下,就会出现 .babelrc)

打开配置一下

{

"presets": [

["env", {

"modules": false,

"targets": {

"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

}

}],

"stage-2"

],

// 改变的主要是下面的这个plugins

"plugins": ["transform-vue-jsx", "transform-runtime",

["import",

{

"libraryName": "vant",

// "libraryDirectory": "es", 如果是webpack 这个是不需要配置的

"style": true

}

]

]

}

第三步使用,这里用轮播图作为例子

import { Swipe, SwipeItem } from "vant";

components: {

[Swipe.name]: Swipe,

[SwipeItem.name]: SwipeItem

}