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

有赞Vant组件库

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

 

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

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

 
   墨刀的 Vant 组件库模板

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

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

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

基础类组件

 

表单类组件

 

反馈类组件

 

展示类组件

 

导航类组件

 

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

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

 

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

“地址编辑组件”

 

“省市区选择”

 

“商品卡片”

 

“优惠券”

 

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

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

 

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

 

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

知识付费方向产品经理,为200+企业提供内容变现方案,平时很喜欢用墨刀去设计一些有意思的东西,像制作了蚂蚁金服/Weui/有赞等组件库的墨刀模板,又比如独立设计了飞机大战小游戏,再比如画了“墨刀的第一台挖掘机”,以及实现了很多炫酷的交互。

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

微信号:zuodong

墨刀联合有赞Vant组件库,让你轻松设计出电商原型的更多相关文章

  1. HBuilderX使用Vant组件库

    HBuilderX使用Vant组件库 HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装V ...

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

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

  3. vue-cli3移动端自适应配置 Vant组件库

    module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDire ...

  4. 移动端Vant组件库REM适配

    REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant ...

  5. vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

    1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g52013 ...

  6. 京东 Vue3 组件库支持小程序开发啦!

    源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...

  7. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  8. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  9. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

随机推荐

  1. d3绘制饼状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. linux下ls -l命令(即ll命令)查看文件的显示结果分析

    在linux下使用“ls -l”或者“ls -al”或者“ll”命令查看文件及目录详情时,shell中会显示出好几列的信息.平时也没怎么注意过,今天忽然心血来潮想了解一下,于是整理了这篇博客,以供参考 ...

  3. 类似于c语言读取文件进行解析

    $log_file_name = 'D:/static/develop/kuai_zhi/acagrid.com/public/Logs/'.date('Ym').'/'.date('d').'_er ...

  4. halcon应用案例探究

    14.1  Access 1. get_region_chain 功能:一个对象的轮廓(contour)作为链式码. 2. get_region_contour 功能:查询一个目标的轮廓(contou ...

  5. Java开发面试题汇总整理

    又是金三银四的时候,我希望这份面试题能够祝你一臂之力! 自我和项目相关 1.自我介绍 2.你觉得自己的优点是?你觉得自己有啥缺点? 3.你有哪些 offer? 4.你为什么要离开上家公司?你上家公司在 ...

  6. 安装 VMWare ESXi 6.7:VMB: 548: Unsupported CPU:6.7版本的ESXi 不支持 某些cpu了

    如题,谨记! 升级是双面刃! 用6.5--版本,即可.

  7. 某公司面试java试题之【一】,看看吧,说不定就是你将要做的题

  8. page load时执行JavaScript

    // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLo ...

  9. Jquery EasyUI Combotree和 EasyUI tree展开所有父节点和获取完整路径

    Jquery EasyUI Combotree展开所有父节点 Jquery EasyUI Combotree获取树完整路径 Jquery EasyUI tree展开所有父节点 Jquery EasyU ...

  10. WebStorm 11的安装与激活

    之所以选择WebStorm 11的这个版本主要是因为他的激活比较方便. WebStorm官网上目前已经不是11版本了,这意味着你得通过其他途径下载WebStorm 11(如:度娘). 下载安装完之后, ...