Web3.js入门【详细】

前置工作

// 安装vant-ui
npm install vant
npm install unplugin-vue-components -D

// 配置vue.config.js
const { defineConfig } = require('@vue/cli-service');
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()]
      })
    ]
  },
})

// 安装element-plus
npm install element-plus

web3连接到以太坊网络(测试网、主网)

1.什么是web3:web3模块是区块链保护出来的RPC接口层,web3.js从而实现和区块链交互。

  • web3.eth:用于与以太坊区块链和智能合约之间的交互
  • web3.utils:包含一些辅助方法
  • web3.shh:用于协议进行通信的P2P和广播
  • web3.bzz:用于与群网络交互的Bzz模块

2.实例化web3对象

var Web3 = require('web3');
// "Web3.givenProvider" will be set if in an Ethereum supported browser.
var web3 = new Web3(Web3.givenProvider || "https://api-sepolia.etherscan.io/api");

3.安装web3依赖

npm i web3

4.账号创建

web3.eth.account.create([entopy])
// entopy: 作为账户的密码

5.获得账户余额

    // get balance
    web3.eth.getBalance(address).then((res) => {
      console.log(res);
      // Unit Conversion
      balance.value = web3.utils.fromWei(res, "ether") + "ETH";
    });

6.ETH转账