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 条评论
登录 后参与评论

相关文章

来自专栏小古哥的博客园

微信小程序-开发入门(一)

微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应...

5985
来自专栏数据结构笔记

python爬虫系列之 xpath实战:批量下载壁纸

我们要爬取的目标网站是:http://www.netbian.com/,这个网站长这样:

3684
来自专栏较真的前端

使用神器eruda 进行移动端调试

3483
来自专栏编程坑太多

「小程序JAVA实战」微信开发者工具helloworld(三)

1583
来自专栏coding for love

浏览器加载解析渲染机制的全面解析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1061
来自专栏编程直播室

Angular 2的基本构建块

2193
来自专栏有趣的Python和你

人生若只如初见,何必找包爬数据SeleniumPhantomJS豆瓣登陆

1264
来自专栏Google Dart

AngularDart4.0 指南-体系结构概述 顶

AngularDart(我们通常在这个文档中简单地称为Angular)是一个框架,用于在HTML和Dart中构建客户端应用程序。它是作为Angular包发布的,...

853
来自专栏编程之路

羊皮书APP(Android版)开发系列(一)Icon图片生成神器

        工欲善其事,必先利其器,我们要开发一款app,首先我们肯定要知道app的名字,其次我们就要准备app的logo图片,而这个logo图片又有多种尺...

943
来自专栏漫漫前端路

vue-cli 3.0 下发布一个 TypeScript 组件

vue-cli 3.0 提供了一系列功能,包括对 Babel, TypeScript, ESlint, PWA 等开箱即用的支持,同时,它也提供了一个 CLI ...

1752

扫码关注云+社区

领取腾讯云代金券