vant组件库

移动端组件库参考: www.jianshu.com/p/c3c671787…

官网:vant-contrib.gitee.io/vant/v2/#/z…

1, 下载安装vant组件库

cnpm i vant@latest-v2 --save

2, 以下两种导入方式: 导入所有组件: 在main.js中添加如下代码即可

import Vant from 'vant';
	import 'vant/lib/index.css';
	Vue.use(Vant);

然后在组件中直接复制官方文档中的组件代码即可显示

<van-icon name="chat-o"  badge="9" color="#1989fa" size="40"/>

按需导入组件(推荐) 首先安装插件 : cnpm i babel-plugin-import --save 在根目录的babel.config.js文件中添加plugins字段

module.exports = {
  		presets: [
    			'@vue/cli-plugin-babel/preset'
  		],
  		plugins: [
    			['import', {
      				libraryName: 'vant',
      				libraryDirectory: 'es',
      				style: true
    			}, 'vant']
  		]
	}

在mian.js中按需导入需要用到的组件

import { Button, Icon } from 'vant';
Vue.use(Button);
Vue.use(Icon);

最后, 在组件中直接复制官方文档中的组件代码即可显示

<van-icon name="chat-o"  badge="9" color="#1989fa" size="40"/>