vant官方参考文档：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

一、vant安装

npm i vant@next -S

npm i babel-plugin-import -S

二、使用

1.在main.js引用

import {Button} from 'vant'

2.在babel.config.js配置

plugins: [
    [
      'import',
      {
      libraryName: 'vant',
        libraryDirectory: 'es',
      style: true,
      },
      'vant',
    ],
  ],

3.在App.vue中使用一个按钮来测试

<template>
  <van-button type="warning">警告按钮</van-button>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

4.结果如图，测试成功

 三、阿里巴巴图库使用

阿里巴巴图标库地址：https://www.iconfont.cn/

1.使用步骤（文字版）：

1.找到官网注册登录；

2.寻找自己满意的矢量库，点击购物车图标，添加入库；

3.导航栏找到购物车图标，点击；

4.添加至项目（注意：第一次使用并没有项目，需要创建个项目）；

5.找到symbol，复制链接，在public/index.html中引入（注意加  http:）;

<script src="http://at.alicdn.com/t/c/font_4058024_rpy97nfbsij.js"></script>

6.导航栏帮助->代码应用；

7.找到symbol引用，按照步骤一步一步来即可；

2.使用步骤（图片版）

 

 

 

 3.测试

 成功！！！