使用Vue.js 开发以太坊Dapp

当前Web3 生态圈的前端大部分使用React 完成，使用Vue 开发的很少，有的话可能也是使用Vue 2。近年Vue 3.0 渐趋完善，因此就写了vue-dapp 这个套件让Vue.js 的开发者也能轻易开发Dapp。

VueDapp是使用TypeScript 写成，在与以太坊沟通方面主要仰赖ethers.js，目前支援的钱包服务有MetaMask、WalletConnect 和Coinbase Wallet。

快速开始

要使用Vue 3 来开启一个项目的话，可以有以下几种方法：

这篇文章就使用Vue CLI 来做说明吧！

首先安装Vue CLI 全域套件

yarn global add @vue/cli @vue/cli-service-global

然后就可以建立项目，你可以选择使用 Default (Vue 3) 或是自行配置Vue3 + TypeScript 的组合。

vue create vue-eth

进入项目后接着安装套件，就可以开始写code 了。

yarn add vue-dapp ethers

首先在main.js 的地方引入vue-dapp

接着在App.vue 的地方放入元件<vdapp-board />，顺便加一个Connect 按钮，以及显示钱包的地址。

最后在script 的地方，使用vue-dapp 的 useBoard 和useEthers

完成！执行 yarn serve 后看看效果如何…

Vue CLI 是使用webpack 的环境，如果要使用Vite 的话，除了上述的步骤之外，还需要一些额外的环境配置，可以参考文件Using Vite的三个步骤，如果嫌麻烦的话，可以直接复制vue3-dapp-starter这份项目。

来一段工商服务时间：

Gitcoin Grant是以太坊生态系的开源软件募资平台，写作本文的当下正好是GR 12 的期间，也就是第12 轮的募资活动。

这个募资平台采用Quadratic Funding，能够上平台募资的项目必须是Ethereum 相关的开源软件、文教等，最新一轮也新设了气候变化、加密相关的技术倡导、长寿背景下的开放科学等领域。

近日VueDapp 终于通过审核，有资格在平台上接受捐赠。

平方募资法特别的地方在于，每个人的一点点捐赠，可以让项目分配到额外一笔补助资金，而且越多人捐赠可以让项目从匹配池（matching pool）分配到的补助金就越多。

Gitcoin Grant 以此助长了以太坊生态系的繁荣发展。

VueDapp 的起源主要参考了React 写的useDapp，UI 设计方面则是参考Web3Modal。

透过这份项目，除了希望可以促进Vue.js 的开发者进入Web3 领域之外，也期待有更多人加入Ethereum 的开发世界！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。