安装
npm install vant -S
安装 babel-plugin-import
一款babel插件
它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
在.babelrc
文件中配置plugins
"plugins":[
"transform-vue-jsx",
"transform-runtime",
["import", [{ "libraryName": "vant", "style": true }]]
]
按需引入2种方案
第一种
<template>
<van-button>按钮</van-button>
</template>
<script>
import {Button} from "vant";
export default{
data(){
return{}
},
components:{
[Button.name]:Button
}
}
</script>
第二种
在man.js文件中,按需引入
import {Button,Toast} from "vant"
Vue.use(Button).use(Toast)
全局引入
vant 官网有说全局引入,但是配置
babel-plugin-import
插件后,将不允许以这种方式导入组件