我开发了年收入30w刀的Vue组件库

前端宇宙

共 1910字,需浏览 4分钟

 ·

2021-10-30 08:44

你用过Vuetify么?这是一款Vue技术栈知名的组件库,遵循谷歌Material设计规范[1]

Vuetify

从2016年9月第一个pre-alpha版本发布至今,已经坐拥3w2star

围绕Vuetify组件库,还衍生出了:

  • 视频课程(vuemastery[2]vueschool[3]

  • 完整的支持系统(面向企业、社区)

  • 社区生态

  • 主题商城

这一切的正常运转,主要靠三股力量:

  • 作者「John Leider」及他的妻子「Heather Leider」全职参与

  • 一个核心团队[4]

  • 社区贡献

那么Vuetify每年能创造多少收入呢?答案是:30万刀。

让我们一起看看Vuetify背后的故事。

本文内容参考自I Built A $300K/Year Vue.js Component Library

转业士兵当码农

在伊拉克完成任期后,「John Leider」于13年回到家乡佛罗里达继续他的IT学业。

最初,John主要使用PHPjQueryMySQL从事服务端开发。

在学习Laravel(一款PHP服务端框架)过程中,John从教学视频中了解到Vue1(那时还叫Seed),他立刻爱上了这种简洁的开发风格。

作为从Vue1到2的早期用户,John一直想打造一款基于materializecss[5]Vue组件库。

materializecss

经过3到4个月的开发,他的组件库终于上线了,这就是Vuetify

没有想到,Vuetify一上线就好评如潮,这激励了John继续投入数千小时来完善他。

时间来到17年10月,距离Vuetify发布已快一年时间,John决定全职投入开源工作。

开源收入

全职开源意味着需要自谋生路。好在相比于Babel这样偏低层的工具,组件库离用户更近,这意味着更多曝光量。

最初的收入来自于曝光量带来的企业、个人赞助,大概每月500刀。

随着时间推移,这部分收入已经增加到每月大概6.5k刀。

来自Patreon[6]的收入:

来自Github Sponsor[7]的收入:

Vuetify使用opencollective[8]托管项目的财务收支。

除了捐赠,John也在积极探索组件库的业务模式,比如:

Vuetify为企业用户提供付费的支持服务。

然而,花费了数年时间,John也没能形成一套稳定的激励企业付费的业务。

除此之外,John开通了Vuetify商店,销售品牌服装、配饰、数码产品、页面主题等。

从最初的每月不到100刀,到现在的1.5w到2w刀。商城逐渐成为主要收入来源。

除此之外还有文档内的贴片广告:

不管是贴片广告、商城收入还是赞助收入,都是建立在Vuetify庞大的用户数与良好的口碑基础上的。

基本盘

为了维护基本盘,John将收入的大部分回馈社区,包括:

  • 维护Discord[9]社区

  • 维护Github issueTwitter账户

  • 精心编写文档

  • Vue生态的许多实体合作推出课程:

与VueMaster合作
  • 为每个核心成员每月提供1k刀左右的补助

总结

可以看到,作为开源项目,Vuetify建立了完整的:从「提升用户体验」「增加收入」的闭环。

这使得他一直在致力于打造更好的Vue组件库。

从开源中来,到开源中去。这种理念,值得其他开源项目借鉴。

遥想Vue2时代的ElementUI,同为优秀的组件库,只能一声叹息。

参考资料

[1]

Material设计规范: https://material.io/

[2]

vuemastery: https://www.vuemastery.com/

[3]

vueschool: https://vueschool.io/?friend=vuetify

[4]

核心团队: https://vuetifyjs.com/en/about/meet-the-team/

[5]

materializecss: https://materializecss.com/

[6]

Patreon: https://www.patreon.com/vuetify

[7]

Github Sponsor: https://github.com/sponsors/johnleider

[8]

opencollective: https://opencollective.com/vuetify

[9]

Discord: https://community.vuetifyjs.com/

浏览 108
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报