当前位置： 主页 > 区块链技术 > > 以太坊上钱包开发示例：前端vue3和web3模块使用

以太坊上钱包开发示例：前端vue3和web3模块使用

2024-10-22 08:56:06 | 来源：本站整理 | 作者：星蕴

前端用vue3确保vscode打开后，你的系统已经安装了node和npm，F:\study\ethfang> node -vv18.12.1F:\study\ethfang> npm -v8.19.2全局安装vuenpm install -g @vue/cli启动钱包项目vue create web3-walletF:\study\ethfang> cd .\web3-wallet\F:\stud

前端用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）和区块链技术的普及。

[xss_clean]import {ref} from "vue";const string = ref("hello");var web3= new Web3(Web3.givenProvider||"wss://sepolia.infura.io/ws/v3/401c8c4fc37440068881de3787afcd91")[xss_clean]

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

本站提醒：投资有风险，入市须谨慎，本内容不作为投资理财建议。