Vue3 与以太坊无缝对接，构建去中心化应用前端实战指南

随着区块链技术的普及，去中心化应用（DApp）逐渐成为开发热点，Vue3 作为目前最流行的前端框架之一，凭借其响应式系统、组合式 API 和轻量级特性，为构建 DApp 前端提供了理想的技术栈，而以太坊作为全球最大的智能合约平台，是 DApp 开发的核心基础设施，本文将详细介绍如何使用 Vue3 对接以太坊，从环境准备到核心功能实现，帮助开发者快速上手 DApp 前端开发。

环境准备

在开始之前，需要确保开发环境满足以下要求：

基础工具

• Node.js：建议版本 ≥ 16.0（推荐使用 LTS 版本），可通过 Node.js 官网 安装。
• 包管理器：npm 或 yarn（本文以 npm 为例）。
• 代码编辑器：VS Code（推荐安装 Volar 插件以支持 Vue3）。

Vue3 项目初始化

使用 Vite 创建 Vue3 项目（Vite 是新一代前端构建工具，启动速度快，开发体验优）：

npm create vue@latest my-dapp
cd my-dapp
npm install

启动开发服务器：

npm run dev

以太坊相关工具

• MetaMask：浏览器钱包插件（用于与以太坊网络交互，管理账户和签名交易），下载地址。
• 测试网络：为避免消耗真实 ETH，建议使用以太坊测试网（如 Goerli、Sepolia），需在 MetaMask 中添加测试网络并获取测试币（可通过 Faucet 免费获取）。

核心库介绍：Ethers.js

在 Vue3 中对接以太坊，最常用的库是 Ethers.js（推荐使用 v6 版本），相比 Web3.js，Ethers.js 提供了更清晰的 API 设计、更好的 TypeScript 支持和模块化架构，适合现代前端开发。

安装 Ethers.js

npm install ethers

核心概念

• Provider：只读接口，用于连接以太坊节点（如 Infura、MetaMask 提供的节点），获取链上数据（如账户余额、合约状态）。
• Signer：可写接口，由 MetaMask 等钱包提供，用于签名交易（如转账、调用合约写方法）。
• Contract：智能合约实例，通过 ABI（应用二进制接口）和合约地址与智能合约交互。

连接 MetaMask 钱包

DApp 的核心功能之一是连接用户钱包，让用户授权账户并管理资产，以下是 Vue3 中实现 MetaMask 连接的完整步骤。

检测 MetaMask 安装

MetaMask 会向全局注入 window.ethereum 对象，可通过以下方式检测：

const isMetaMaskInstalled = () => {
  return Boolean(window.ethereum);
};

请求连接钱包

调用 window.ethereum.request({ method: 'eth_requestAccounts' }) 请求用户授权连接钱包：

const connectWallet = async () => {
  if (!isMetaMaskInstalled()) {
    alert('请安装 MetaMask 钱包！');
    return;
  }
  try {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    console.log('已连接账户：', accounts[0]);
    return accounts[0];
  } catch (error) {
    console.error('连接失败：', error);
    return null;
  }
};

监听账户变化

用户可能在 MetaMask 中切换账户，需监听 accountsChanged 事件更新前端状态：

window.ethereum.on('accountsChanged', (accounts) => {
  if (accounts.length > 0) {
    console.log('切换账户：', accounts[0]);
    // 更新前端状态（如 Vuex/Pinia 中的账户信息）
  } else {
    console.log('账户已断开连接');
    // 清空前端状态
  }
});

Vue3 组件示例

在 Vue3 中，可以使用 ref 管理连接状态，组合式 API 封装逻辑：

<template>
  <div>
    <button @click="connect" :disabled="connected">
      {{ connected ? `已连接：${account}` : '连接 MetaMask' }}
    </button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const account = ref('');
const connected = ref(false);
const connect = async () => {
  if (!window.ethereum) {
    alert('请安装 MetaMask');
    return;
  }
  try {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    account.value = accounts[0];
    connected.value = true;
  } catch (error) {
    console.error('连接