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.测试

成功！！！

vue3仿美团项目(2)-vant和阿里巴巴图库使用相关推荐

《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
《仿大众点评仿美团做一个评价网站——Java SSM》项目研发阶段性总结
<仿大众点评仿美团做一个评价网站--Java SSM>项目研发阶段性总结一.后台功能实现 (一).注册商家 (二).登录商家中心 (三).商家登录后台操作模块 (1).用户管理模块 (1 ...
《仿美团》项目研发总结
<仿美团>项目研发总结作者:吴育清本次任务完成时间:2018年6月3日-2019年7月1日开发工具与关键技术:MyEclipse + MySQL + javabean + servl ...
推荐 9 个 GitHub 上练手项目（在线考试、仿美团、仿抖音、仿B站、仿头条...）
GitHub项目推荐推荐的这几个 GitHub 项目并不是简单的 XX 管理系统,我会从下面这些方向推荐几个入门级别但是不那么 Low 的项目. "我自己是一名从事了6年web前端开发的老 ...
CH12-综合项目—仿美团外卖
文章目录目标一.项目分析目标项目概述开发环境模块说明二.效果展示目标店铺界面店铺详情界面店铺详情界面确认清空购物车的对话框菜品详情界面订单界面和支付界面三.服务器数据准备 ...
《iVX 高仿美团APP制作移动端完整项目》04 美食页标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认该美食页为首页中美食按钮 ...
用vue仿美团APP
vue仿美团APP 这几天上班也不是很忙,就想着用vue做一个APP,感觉美团这个APP里面的功能比较齐全,就仿美团做了一个,但是现在我也没有充足的时间去做,只能有时间做一点,现在前面的几个大页面都做 ...

vue3仿美团项目(2)-vant和阿里巴巴图库使用

一、vant安装

二、使用

三、阿里巴巴图库使用

vue3仿美团项目(2)-vant和阿里巴巴图库使用相关推荐

最新文章

热门文章