目录结构
src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── ConnectWallteExample.vue
│ │ └── HelloWorld.vue
│ ├── hooks
│ │ └── useWallte.js // 核心逻辑
│ ├── main.js
│ ├── registerServiceWorker.js
│ └── web3
│ ├── abis.js // 提供abis
│ ├── chains.js
│ ├── config.js // 配置项
│ ├── constants.dev.js
│ ├── constants.js
│ └── tools.js
src/web3/config.js, 默认使用Metamask的web3提供者 ,providerOptions 配置可以参考 https://github.com/Web3Modal/...,
Metamask 默认使用 Infura 的服务器做为 web3 提供者。 就像我们上面做的那样。不过它还为用户提供了选择他们自己 Web3 提供者的选项。所以使用 Metamask 的 web3 提供者，你就给了用户选择权，而自己无需操心这一块。
//默认使用Metamask的web3提供者
const providerOptions = {
// Example with injected providers
injected: {
display: {
logo: "data:image/gif;base64,INSERT_BASE64_STRING",
name: "Injected",
description: "Connect with the provider in your Browser"
},
package: null},
// Example with WalletConnect provider
walletconnect: {
display: {
logo: "data:image/gif;base64,INSERT_BASE64_STRING",
name: "Mobile",
description: "Scan qrcode with your mobile wallet"
},
package: WalletConnectProvider,
options: {
infuraId: "INFURA_ID" // required
}}
};
src/hooks/useWallte.js 这里暴露出来的web3、userAddress、chainId、networkId、resetApp、assets、getAccountAssets 等,
可以参考ConnectWallteExample.vue这个demo 。
这就是 vue-cli-plugin 的好处 ，你可以随便的 自定义 操作增删改 useWallter.js
一旦你有了合约的地址和 ABI，你可以像这样来实例化 Web3.js，就可以愉快的调用我们合约的函数: call and send
