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

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

有赞Vant组件库

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

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

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

墨刀的 Vant 组件库模板

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

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

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

基础类组件

表单类组件

反馈类组件

展示类组件

导航类组件

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

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

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

“地址编辑组件”

“省市区选择”

“商品卡片”

“优惠券”

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

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

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

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

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

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

微信号:zuodong

原文地址:https://www.cnblogs.com/productcompass/p/10629036.html

时间: 2024-09-28 11:07:12

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

HBuilderX使用Vant组件库

HBuilderX是一款由国人开发的开发工具,其官网称其为轻如编辑器.强如IDE的合体版本.但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装Vant Weapp,鄙人尝试了各种方法,经历各种错误后终于成功安装vant组件库,在这里分享一下使用HBuilderX进行vue.js开发时安装Vant组件库的经验,使用的版本为2019.08.10更新的2.2.0版本. 本篇所有操作建立在操作系统为windows且已经成功安装配置node.js的基础上. 一.建立uni-app新项目

微信小程序引入Vant组件库

前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &quo

微信小程序——引入Vant组件库

背景 在微信小程序开发过程中,使用第三方组件库,高效便捷的使用 步骤 安装npm 右键小程序根目录,打开终端 输入:npm init Next 安装vant组件 右键小程序根目录,打开终端 输入:npm i @vant/weapp -S --production 构建npm 使用npm模块 完成 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护

微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理一.下载Node.js*链接:https://nodejs.org/en/推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本 二.在微信开发工具做对应操作 链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作 三.安装Vant组件库选中miniprogram文件,右

让你的原型不再LOW-一套设计师倾情奉献的组件库免费下载

让你的原型不再LOW-一套设计师倾情奉献的组件库 [文章摘要]很多小伙伴常常抱怨没有好的组件库,导致每次画原型的时候自己一个按钮一个按钮绘制,效率低下.这个组件库来自有着多年经验的中梦科技设计总监@姚岁岁 ,从设计师的角度设计组件库,相信能让你的原型发挥出不一样的光彩. 每次看到网络上别人的原型图,都觉得好高档,好羡慕啊,但自己做的原型图却样式很low.虽然有人会说,原型嘛,又不是做视觉设计,干嘛要看起来高大上,保证功能才是第一的.但是如果能很简单的出一份高档的原型图,无疑会有利于展现自己的专业

泛函编程(18)-泛函库设计-并行运算组件库

作为专业的编程人员,我们经常会因为工作需要建立一些工具库.所谓工具库就是针对工作上经常会遇到的一些共性问题预先编制的由一整套函数所组成的函数库.通常这些工具库的功能都是在特别定制的一些数据类型支持下由一系列函数围绕着这些数据类型进行运算而实现的.在泛函编程范畴内也不例外.但在泛函工具库里的函数则更重视函数的组合能力(functional composition):因而泛函的工具库一般称为组件库(combinator library),库内函数则被称之为组件(combinator).组件库的设计者

在vue里面使用 vant ui组件库

一.放上vant官网 https://youzan.github.io/vant/#/zh-CN/ 二.按需引入vant组件 npm i vant -S npm i babel-plugin-import -D  //这是一个插件 按需引入时必须要引入 // 在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: tru