专栏首页vue学习26、有赞Vant组件库的引入及轮播图片预览的实现①

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

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

(1)安装

可以参加官网的快速上手

$ cnpm install vant -S

vant安装

(2)引入

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

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

`.babelrc`设置

(3)使用

  • 然后,你就可以去import引入和使用了,我们进入到main.js中先按需引入一个button组件,看是否能用

main.js引入与注册vant的部分组件

  • 如果要按需引入多个组件,怎么办?可以这样简写:
import { Button, Icon } from 'vant';
Vue.use(Button).use(Icon);
  • 然后我们就可以在页面中直接使用了(无须再次引入)

页面中使用vant组件

最后引入成功的效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 11、组件入门及写个首页头部组件

    前言:项目准备工作说了很久,不知道大家学会了没有?今天开始我们开始正式搭建页面,先从首页开始,在搭建页面的过程中,我也会将vue的知识点在其中穿插讲解,但是你最...

    Ewall
  • 23、一看就懂父子组件之间的传值

    通过"props down , events up"我们就简单的实现了父子组件之间的双向传值,这是很基本的知识点,其它还有$invoke等等方法,大家可以去官网...

    Ewall
  • 24、商品列表页之数据渲染和传值

    (1)data中定义一个list对象 (2)将res.data.goodslist赋值给list (3)我们将商品图片、文字描述、价格、折扣等等信息传给子组...

    Ewall
  • 京东风格的移动端Vue组件库NutUI2.0来啦

    移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注。据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI 。

    京东技术
  • 我是如何让公司后台管理系统焕然一新的(下)-封装组件

    马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热潮,虽说今年是互联网的寒冬,但是只要对技术始终抱有热情以及有过硬的实力,即使是寒冬也不会阻挠你前进的步伐...

    桃翁
  • 【数据】银行大数据

    银行业日常产生大量数据。 为了区别于竞争对手,银行正在采用大数据分析作为其核心战略的一部分。 分析将成为银行关键的游戏变革者。 在这张信息图中,我们探讨了银行在...

    陆勤_数据人网
  • [译] React 中的 dumb 组件和 smart 组件

    原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a6...

    江米小枣
  • 无形广告植入最可怕!亚马逊的这口安利我吃得心甘情愿

    VRPinea
  • 小程序内引入使用vant组件操作教程详解

    Vant是一套由有赞技术团队精心打造的轻量可靠的移动组件库,包含了按钮、弹层等基础组件,单选、复选、输入框、选择器、评分等表单组件,提示框、折叠面板、轮播图等交...

    许坏
  • 黑客又惹祸,致比特币下跌近2000美元

    据BtcTrade国际站的数据,截止22日上午10:30,比特币今日价格现报125128.6CNY,较前一日有大幅下跌,同时也创下本周单日最大下跌幅度。而造成本...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券