當前 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 後看看效果如何…

使用 Vite 開發

Vue CLI 是使用 webpack 的環境，如果要使用 Vite 的話，除了上述的步驟之外，還需要一些額外的環境配置，可以參考文件 Using Vite 的三個步驟，如果嫌麻煩的話，可以直接複製 vue3-dapp-starter 這份專案。

Gitcoin Grant

來一段工商服務時間：

Gitcoin Grant 是以太坊生態系的開源軟體募資平台，寫作本文的當下正好是 GR 12 的期間，也就是第 12 輪的募資活動。

這個募資平台採用 Quadratic Funding，能夠上平台募資的專案必須是 Ethereum 相關的開源軟體、文教等，最新一輪也新設了氣候變化、加密相關的技術倡導、長壽背景下的開放科學等領域。

近日 VueDapp 終於通過審核，有資格在平台上接受捐贈，捐贈連結點這裡。

平方募資法特別的地方在於，每個人的一點點捐贈，可以讓專案分配到額外一筆補助資金，而且越多人捐贈可以讓專案從匹配池（matching pool）分配到的補助金就越多。

Gitcoin Grant 以此助長了以太坊生態系的繁榮發展。

VueDapp 的起源主要參考了 React 寫的 useDapp，UI 設計方面則是參考 Web3Modal。

透過這份專案，除了希望可以促進 Vue.js 的開發者進入 Web3 領域之外，也期待有更多人加入 Ethereum 的開發世界！

如果在使用上遇到什麼問題，或是想要增加新功能，歡迎開 issue 或發 PR 到 Github 上，中文英文都可以，也歡迎對本專案進行捐款贊助！