介绍下Web3赏金黑客们必备的开箱即用 Web3 元宇宙 NFT 开发必备脚手架

你好呀，我是 Bruce，元宇宙赏金黑客组织 Web3HackerDAO 创始人，在这里我主要分享我对世界的所见所闻、Web3 的一些看法理解以及技术积累文字。

Web3HackerDAO 是一个由“元宇宙赏金黑客”为中坚产品开发力量的从全人类角度思考而开发的 Web3 产品的一个去中心化的黑客组织。

1.commit-list.png

这个脚手架是 Bruce 多次比赛并连续拿了 10 几个Web3黑客松奖后积累的一套可以开箱即用的 Web3 前端脚手架，这个月Web3 黑客松比赛有好几个，目前要参赛的 idea 正在疯狂脑暴构思中，昨天刚刚从新过了一遍一个解决方案来让你的 NFT 拥有无限可能的 Diamond 合约架构的脚手架代码。

昨天到今天刚刚加入了 2 位赏金黑客，要一起参与这轮的 Web3 黑客松比赛，忽然发现我可能没有介绍清楚这套代码的逻辑，幸亏第一位加入的黑客同学是正好也有类似的逻辑才一看我之前的文章介绍就明白这个“赏金黑客”脚手架的意义！

在文章结尾我附带了两个已经开源的拿了Web3黑客松奖的部分组件代码，欢迎查看！

时间紧迫，这里我简单介绍下这个 Web3 开发前端脚手架的核心几个特性，以及整个 Web3HackerDAO 生态的后续整体架构脉络。

开箱即用的 Web3 前端开发脚手架

Web2 从业 10 几年，到最后会发展到了低代码等，其实本质是对代码的进一步抽象。虽然各种框架语言不断推陈出新，但是从业务角度来看，不外乎各种登录、支付、数据组件业务的抽象化，使其方便后续快速开发等。

到了 Web3，一样的出现各种不同的框架方案，当然在前端还是 Vue，React 或其他 Web2 一样的前端框架，而核心关键在于有一套乘手的解决方案。

对于市面上各种 Web3 教程或者资料合集、Awesome 系列研究了一波后，总结了这样一套基于 Vue3 技术栈的框架方案，目的在于帮助还不熟悉 Web3 开发的同学可以比较低成本的能介入开发一个完整的 Web3 应用。

当然这个框架方案并不是只能在初级阶段使用，而是适用于产品化应用开发项目的，基本上是 Bruce 最近半年的最佳实践的反复总结的。

前端框架使用 Vue3，是基于 https://github.com/antfu/vitesse 提供的最佳实践脚手架基础上增加了 Web3 业务组件搭建的。

1. 添加了常用的组件，整套 UI 是基于 TailwindCSS 的

• loading
• LoginModal: Web3 登录
• OnboardModal: 在用户浏览器未安装 Metamask 时进行引导下载的组件
• 基本按钮组件: 添加了点击音效功能
• 弹窗组件: 用于信息提示等
• 编辑器组件：基于 @kangc/v-md-editor 包进行了二次封装

下方截图中一些目录是某些不同项目的组件的目录，非所有组件都是公共组件。

一般是先针对某个项目开发了某个组件，后面多个项目确实重复使用了某个组件才去抽离出来作为通用组件。

2.component-list.png

2. 基于 IPFS 服务的图片、文件管理组件

• 可拖拽上传
• 单个图片上传及展示: 可用于头像、文章头图的上传表单使用
• 多个图片上传及展示: 可用于相册等表单组件
• 图片自动上传到 IPFS（基于 NFT.Storage 的服务封装）

3.fileuploader.png

3. 使用 `.env` 文件来本地开发可以设置 `VITE_PROJECT_FOLDER`

4.dot-env.png

• 多个不同项目可以放在一个代码库里而互相不干涉，我们以建立新项目 awesome-web3 为例
• 不同项目在 pages 目录下新建一个对应的子目录即可，这里我们建立 /pages/awesome-web3 目录
• 复制 /public/default 目录为 /public/awesome-web3 目录，可以自行替换里面的图片 logo 等为新项目的 logo，这些 logo 会被用到浏览器 favico 或者一些组件的布局 logo 里面
• .env 内设置 VITE_PROJECT_FOLDER=awesome-web3

4. 自动化的部署策略

目前代码是部署到 vercel 上并设置了自动化的域名映射的，简单来说是这样的：

• 不同的 branch 会在 vercel 上有对应设置的域名映射
• 不同的 branch 在 vercel 上也有设置不同的环境变量参数
• 一旦 push 新的代码到该 branch，则 vercel 会自动触发 build 该域名的代码，而不会和其他项目冲突
• 在某个项目开发到一定程度阶段时，再 merge 到 main 分支，这样该项目开发过程中新增的一些公共的组件或者功能则可以共享给其他项目使用

还有其他更多特性，待这个月密集的几个 Web3 黑客松比赛过后（总奖金超过 100万美金：Web3 赏金黑客 11月-12月可以关注的几个黑客松比赛，总共奖金超过100万刀！），会回过头来整理下项目的多语言官网以便更多黑客伙伴加入“元宇宙赏金黑客”组织一起改进这个脚手架！

是的，要作为全球的一个统一的 Web3 前端开发平台来发展的！因为本身“元宇宙赏金黑客”组织要开发的 Web3 产品基本上都是基于全人类使用的角度来做的，并不会太在意国内或者国外市场的区别的。

招募这个月一起参与 Web3 黑客松的伙伴

目前已经有两位伙伴加入，欢迎更多想要介入 Web3 开发的伙伴加入成为“元宇宙赏金黑客”的一员！一起打造 “Web3 的 DApp 工厂”。

这个月接下来时间 Bruce 会花更多在和 “赏金黑客" 成员一起快速构建几个 idea 参加几个 Web3 黑客松比赛上，欢迎感兴趣的黑客们加入，一起使用改进这个“开箱即用”的 Web3 开发套件脚手架！

参与开发项目的伙伴，如果项目有拿到 Web3 黑客松奖，则会根据具体贡献分配一部分奖金做为贡献奖励！

Web3HackerDAO 的伙伴分以下几类：

1. 赏金黑客

这是整个组织的核心开发力量，他们要具备极强的好奇心，也乐于学习新的技术及知识，能全栈开发整个产品，这样一旦有什么新的 idea 可以非常快速的在 DAO 内组建人数极少的“赏金黑客” 小分队，快速的迭代开发产品。

加入者需要具备一定的开发能力，不一定需要马上是技能点都点满的。

因为最终在整个 DAO 内，赏金黑客是自由流动的，他们可能是某个项目的核心开发者，也可能同时是多个不同项目的早期开发者，但是中后期作为维护支持即可。取决于每个项目及每个“赏金黑客”的意愿。

2. VC/基金/早期投资者成员

此类成员需要满足一定的条件，当然最核心会满足资源资金上的限定，否则 DAO 内孵化的项目组会疲于与不同的“走马观花”的所谓投资者沟通而浪费大量的可以 Build 的时间。

赏金黑客经过一定时间的开发后，DAO 会组织线上的多项目同时的 Pitch 大会，让这类成员可以一次性看多个 DAO 孵化产出的项目。

后面 DAO 也会开发一系列的工具来做 VC 成员的资产零知识验证。

3. 早期尝鲜种子用户

此类用户为平台的“种子用户”，会成为平台的热心用户，帮助各个项目组早期找 bug，同时在项目成熟推向市场时，会给与极大的宣传帮助。

当然，各个项目也会在平台的统一的“黑客增长”相关模块功能下，给与此类用户明确的项目奖励。

以上是目前规划的《元宇宙赏金黑客》组织 Web3HackerDAO 的几类用户，也许后续也会进一步调整。具体的要求规则可以联系 Web3Hacker ！

两个开源的获奖的代码说明

1. Stockx3[1]

这个项目一开始是想开发个 Web3 版本的 Stockx.com 来着，后来发现可能要做真正球鞋交易平台，可能对于平台运营来说比较重，后面就简化成，任何人可以在上面发布自己的产品信息了。

每发布一个产品信息其实就是发布了一个新的 ERC1155 的 NFT，只是我在产生 NFT 的元数据提交到 IPFS 并使用 LitProtocol 来做了加密部分信息的处理，这样只有购买了此 NFT 的用户，才可以获得加密后的信息。

这个产品已经在 Web3HackerDAO 内立项，并会从新整理并开发为 “SellX3.com”，作为 Web3 的亚马逊吧。

2. NftTop.Best: Web3-ProductHunt[2]

顾名思义，有用过 Product Hunt 的同学应该明白什么意思，不过这个项目有更加进一步的动作。

他相当于集成了产品提交、众筹、捐赠、评论、投票几个功能为一体的 Product Hunt，虽然我看到 Product Hunt 现在也推出了 Web3 频道，不过似乎他并没有真正融入 Web3，这个项目后续会进一步运用落地到 https://NFTTop.Best ，作为 DAO 孵化项目对外公开的一个渠道，这样所有用户都可以对我们的产品进行投票、捐赠、评论。

ok，以上就是今天的内容，感兴趣加入 Web3HackerDAO 的同学欢迎加 Web3Hacker !

—全文完