Vue移动端开发安装并使用vant

安装

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插件后，将不允许以这种方式导入组件