继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员!

有赞Vant组件库

(做电商的宝宝要捂嘴笑了)

Vant 组件库有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠 (目前在Github上已经收获星星7857颗)

相比于其他Vue UI组件库,Vant 组件库不只是提供基础的UI组件,还增加了许多移动商城内常用的业务组件,可以让开发者快速构建移动商城

墨刀的 Vant 组件库模板

正如有赞团队所说,“如果你需要开发一个移动商城,用Vant就再合适不过了”。

如今墨刀把 Vant 组件库搬上原型模板库(感谢墨刀模板大使周祚栋制作),也让产品经理和设计师更快捷地搭建电商类原型,设计师和开发者交付起来也更顺畅!

来一睹为快这套Vant组件库有哪些实用组件吧!

基础类组件

表单类组件

反馈类组件

展示类组件

导航类组件

而最具特色的业务类组件,包含 “地址编辑”, “省市区选择”,“优惠券选择”,“Sku商品规格”这些相当实用的电商组件。

在墨刀,你都可以十分便捷地一键复用。

(抢先欣赏下部分业务组件)

“地址编辑组件”

“省市区选择”

“商品卡片”

“优惠券”

如何在墨刀一键复用Vant组件?

1 登陆墨刀之后,点击“新建项目”——“从模板中创建项目”,找到“Vant移动端组件库”,点击**“使用模板”,即可进入该模板。

2 选中想要复用的组件,右键点击,然后
“添加到我的组件”。下次在新的项目,你就可以直接从“我的组件”**库里直接拖出来使用了!方便快捷!

特别感谢墨刀原型模板大使 周祚栋,为刀友们制作了此模板!想和大神交流的可以加他微信哦!

知识付费方向产品经理,为200+企业提供内容变现方案。

微信号:zuodong

平时很喜欢用墨刀去设计一些有意思的东西,像制作了蚂蚁金服/Weui/有赞等组件库的墨刀模板,又比如独立设计了飞机大战小游戏,再比如画了**“墨刀的第一台挖掘机“**,以及实现了很多炫酷的交互。

强迫症、细节控、好奇心旺盛,拥有产品、运营、设计一体化的思维和管理能力,擅长底层业务逻辑设计和用户行为研究。

墨刀联合有赞Vant组件库,让你轻松设计出电商原型相关推荐

  1. vant组件做表格_有赞Vant组件库上线墨刀!以后轻松做出电商原型

    继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了 ...

  2. 有赞Vant组件库的引入及轮播图片预览的实现

    有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...

  3. 微信小程序(五)--- Vant组件库,API Promise化,MboX全局数据共享,分包相关

    目录 一.npm包 1.Vant Weapp (1)安装Vant组件库 (2)使用Vant组件 (3)定制全局主题样式 2.API Promise化 (1)基于回调函数的异步API的缺点 (2)API ...

  4. 使用原生开发高仿瑞幸小程序(一):使用 Vant 组件库和配置多页面

    本文由图雀社区认证作者 曾伟@喵先森 写作而成,图雀社区将连载其 使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...

  5. 基于Vue结合Vant组件库的仿电影APP

    Vue综合案例 Vue综合案例 一.项目概要 1.效果前瞻 2.开发流程 3.开发环境 二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...

  6. 当在 终端 中用 npm 安装 Vant 组件库时,发生“npm ERR code ERESOLVE ;npm ERRERESOLVE could not resolve;”报错时,该怎么办?

    出现的问题: 当在 终端 中用 npm 安装 Vant 组件库时,发生 npm ERR! code ERESOLVE: npm ERR! ERESOLVE could not resolve:报错时, ...

  7. 微信小程序引入Vant组件库

    前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...

  8. Uniapp 导入 Vant 组件库

    Uniapp 导入 Vant 组件库 Vant Weapp 开发文档 Vant Weapp - 轻量.可靠的小程序 UI 组件库 创建 wxcomponents 目录 在 uniapp 项目的根目录下 ...

  9. 【Vue知识点- No8.】网易云音乐案例(vant组件库的使用)

    No8.网易云音乐案例 知识点自测 知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...

最新文章

  1. 2018年HBase生态社群画像 +最全资料汇总下载
  2. 全文检索lucene中文分词的一些总结
  3. 前段框架——Vue的get和post请求数据
  4. 子元素的margin-top影响父元素原因和解决办法
  5. SMW0上传模板下载到本地
  6. 智能J IDEA键盘快捷键
  7. 最新版Intellij IDEA视频教程 20170814
  8. 打开git界面_使用 Gitea 快速搭建私有 Git 版本控制服务
  9. 统一并发 I——简介
  10. 基于JAVA+SpringBoot+Vue+Mybatis+MYSQL的微信小程序点餐系统
  11. python读写大文件 meoryerror_Python – 如何在没有MemoryError的情况下gzip大文本文件?...
  12. width:100%以什么为基准的测试
  13. [bzoj1033] [ZJOI2008]杀蚂蚁 Big MoNI
  14. 计算机常用的汉字机内码有哪几种,常用的汉字机内码有几种?
  15. 贾俊平统计学思维导图- 第十一、十二章 相关分析和回归分析
  16. 如何把图片裁剪为圆形
  17. Bootstrap系列之进度条(Progress)
  18. linux做单臂路由,linux做单臂路由实现trunk 使vlan之间通信
  19. 爬虫入门经典(一) | 一文教你用Spider制作简易的翻译工具
  20. 阿里云部署vmware报错

热门文章

  1. VScode 配置 Java 开发环境 (VSCode 天下第一)
  2. 做一个合格的开发,从玩转Apipost开始
  3. css修改多选框的样式
  4. python之mysql数据库连接与封装
  5. CSS基础:flex布局子元素被撑大(文本省略号)
  6. airpods2连接win10的方法步骤
  7. 信用评分卡8_授信模型
  8. 什么是软件质量以及软件质量、软件过程、软件测试之间的关系
  9. 2020最佳mac端app新鲜出炉!今年,你发现了哪些好软件?
  10. [Java基础] 垃圾回收机制