前端用vue3

确保vscode打开后，你的系统已经安装了node和npm，

F:\study\ethfang> node -v

v18.12.1

F:\study\ethfang> npm -v

8.19.2

全局安装vue

npm install -g @vue/cli

启动钱包项目

vue create web3-wallet

F:\study\ethfang> cd .\web3-wallet\

F:\study\ethfang\web3-wallet> npm run serve

安装封装好的框架组件

npm install vant

安装自动按需引入 Vue 组件的包

npm install unplugin-vue-components -D

在 Webpack 配置中使用 unplugin-vue-components 和 VantResolver,放到vue.config.js中

const { VantResolver } = require('unplugin-vue-components/resolvers');

const ComponentsPlugin = require('unplugin-vue-components/webpack');

使用npm run serve -- --verbose命令就可以开启网页

使用web3模块，连接到以太坊主网或者测试网

npm install web3

App.vue中，引入web3模块，后面wss那一段是Infura提供的以太坊访问接口，简单提一下Infura，Infura 是由 ConsenSys 维护和运营的一个区块链基础设施即服务（IaaS）平台，主要提供 API 接口，帮助开发者访问和与以太坊等区块链网络进行交互。ConsenSys 是一家全球领先的区块链技术公司，专注于以太坊生态系统的开发和推广。它成立于 2014 年，由以太坊的联合创始人之一 Joseph Lubin 创建，旨在推动去中心化应用（DApps）和区块链技术的普及。

<template>
  <h1>{{string}}</h1>
</template>

<script setup>
import {ref} from "vue";
const string = ref("hello");

var web3= new Web3(Web3.givenProvider||"wss://sepolia.infura.io/ws/v3/401c8c4fc37440068881de3787afcd91")
</script>

<style lang="less">
</style>

后面会具体实现web3调用api，创建账户，转账，单位转换，余额获取等功能