vant组件库在vue中的使用需要配置的哪些？

Posted 2022-12-08 AC_meimei

一、vant组件库的官网地址：https://vant-contrib.gitee.io/vant/#/zh-CN/icon

二、具体安装配置步骤：

1、在项目里cmd输入命令进行安装：

npm i vant -S

2、安装 babel-plugin-import 插件，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式(输入命令)：

npm i babel-plugin-import -D

3、在.babelrc.js或者 babel.config.js文件中配置plugins(放入这段代码)：注意：如果没有这两个文件，可以自己在项目中全局创这两个文件！

module.exports = 
  presets: ["@vue/app"],
  plugins:[
    [
      "component",
      
        "libraryName":"vant",
        "styleLibraryName":"theme-chalk"
      
    ]
  ]

三、项目中使用：

<template>
	 <view>
			<VanImage width="100" height="100" :src="" @click="imageClick" />
	</view>
</template>
import  PullRefresh, Search, NavBar, Image as VanImage, ImagePreview, Cell, Icon, Uploader  from 'vant'
<script>
	export default 
		 components: 
			    PullRefresh,
			    Search,
			    NavBar,
			    VanImage,
			    Cell,
			    Icon,
			    Uploader
	  		,
		data() 
				return 
				
			
				
		,
		methods: 
			
		,
	
</script>
<style lang="scss" scoped>
	....
</style>