26、有赞Vant组件库的引入及轮播图片预览的实现①

简介: 前言:看了一下移动端比较流行的几个vue组件库如:mint ui、 vux(vux比较适合做微信网页开发如微商城)等等,最后还是选择了用有赞的Vant组件库,因为Vant组件库还是比较符合我们这个商城项目的业务场景的,所以我们使用其中的部分组件来实现我们的部分功能。

前言:看了一下移动端比较流行的几个vue组件库如:mint uivux(vux比较适合做微信网页开发如微商城)等等,最后还是选择了用有赞的Vant组件库,因为Vant组件库还是比较符合我们这个商城项目的业务场景的,所以我们使用其中的部分组件来实现我们的部分功能。
当然,组件库的使用都是大同小异的,大家也可以挑选自己喜欢的组件库移植到自己项目中。
所以这两章主要是这么几个知识点:第一个是Vant组件库的一个初探;其次是用vant实现我们商品详情页轮播图的图片预览效果;第三个就是为我们后面引入高阶的Vant组件打下基础。
Github:https://github.com/Ewall1106/mall

(1)安装

可以参加官网的快速上手

$ cnpm install vant -S
img_d5255bd4d6480e13ee203258d76a8e62.png
vant安装

(2)引入

这里引入vant有点坑啊,,,因为官网不推荐一次性导入所有组件,所以按照推荐的使用按需引入组件方法引入组件。

  • 首先记得要按照babel-plugin-impot插件, 它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装 babel-plugin-import 插件
$ cnpm i babel-plugin-import -D
  • .babelrc设置
    红框中是新添加的部分
img_144f07c7b9c89cff26be331a733f97f4.png
`.babelrc`设置

(3)使用

  • 然后,你就可以去import引入和使用了,我们进入到main.js中先按需引入一个button组件,看是否能用
img_e474a42a1ad6985739c63f727bf95c93.png
main.js引入与注册vant的部分组件
  • 如果要按需引入多个组件,怎么办?可以这样简写:
import { Button, Icon } from 'vant';
Vue.use(Button).use(Icon);
  • 然后我们就可以在页面中直接使用了(无须再次引入)
img_f1889ad813a41ef370b6f4dac851fe85.png
页面中使用vant组件
img_cc687a556c723416aebb69feeda209b2.png
最后引入成功的效果

参考学习
https://youzan.github.io/vant/#/zh-CN/intro
https://github.com/youzan/vant

目录
相关文章
|
4天前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
14 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
3月前
|
JavaScript 前端开发
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
295 0
|
3月前
|
小程序 前端开发 API
uniApp中uView组件库的丰富布局方法
uniApp中uView组件库的丰富布局方法
131 0
|
JavaScript 前端开发 定位技术
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
|
JavaScript 定位技术 API
Vue项目中引入高德地图步骤详解
Vue项目中引入高德地图步骤详解
520 0
|
JavaScript 前端开发 关系型数据库
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型 - 卡拉云
Vue Loading 加载动画组件 (Vue-loader) 看起来很简单不重要,实际上它是保证用户留存的关键一环。选择好 Loading 加载动画,用户留存率翻倍。本文介绍 7 种不同的加载动画 UI 效果(Vue loader),每一种都有其对应的使用场景。举例,旋转加载动画适合短时间加载,旋转加载还能更细分,比如在按钮上的旋转加载,适合提交数据的极短时间,旋转动画在全局的适合多表格数据加载,旋转动画图片可自定义的适合高度定制化的 APP / 网站等。再举例,进度条类的加载动画适合长时间加载,进度条类也可以更细分,比如有蒙层的进度条,有加载进度条带取消按钮,有加载进度条放在网页顶部,
2217 0
|
JavaScript 前端开发
vue项目引入阿里巴巴矢量图标库图标及其使用教程
vue项目引入阿里巴巴矢量图标库图标及其使用教程
1508 0
antd组件库封装42-样式解决方案分析
antd组件库封装42-样式解决方案分析
105 0
antd组件库封装42-样式解决方案分析
|
SQL 开发框架 JavaScript
腾讯开源组件库tdesign-vue:新增组件时是如何初始化的
组件库在添加一个组件的时候,可能会涉及到很多初始化的问题,比如要添加组件库入口文件、组件的说明文档文件、demo例子的入口文件,单元测试的入口文件等等
334 0
|
前端开发 JavaScript
Vue/vant——使用阿里巴巴矢量图引入图标
使用阿里巴巴矢量图引入图标
395 0