前端常用工具

• 前端开发参考文档: wangdoc.com/

• Tailwindcss中文网址: www.tailwindcss.cn/

• MDN官网: developer.mozilla.org/zh-CN/

• CSS参考手册: css.doyoe.com/

• Typescript 练习题网址: github.com/type-challe…

• Ethers: docs.ethers.io/v5/

• 常用UI库 zhuanlan.zhihu.com/p/427940891

• Arco Design Pro UI库: arco.design/vue/docs/st…

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Ethers

ethers.js https://docs.ethers.io/v5/

import { ethers } from 'ethers'
import { prodAddrs, testAddrs, abi } from '../contracts/abi'

export async function getEther () {
    let provider
    if (window.BinanceChain) {
        provider = new ethers.providers.Web3Provider(window.BinanceChain)
        await window.BinanceChain.enable()
    } else if (window.ethereum) {
        provider = new ethers.providers.Web3Provider(window.ethereum)
        await window.ethereum.enable()
    } else {
        return null
    }
    const signer = provider.getSigner()
    const rpcProvider = new ethers.providers.JsonRpcProvider('https://data-seed-prebsc-1-s1.binance.org:8545/')

    // const envAddrs = prodAddrs
    const envAddrs = testAddrs
    const myGasPrice = ethers.utils.parseUnits('5.001', 9)

    const MyContracts = {
        // pond: new ethers.Contract(envAddrs.pond, abi.pondAbi, signer),
    }
    const myAddr = await signer.getAddress()

    return {
        myAddr,
        ...ethers,
        provider,
        signer,
        rpcProvider,
        c: MyContracts,
        gasPrice: myGasPrice
    }
}

const MyEthers = {}
MyEthers.install = function (app, options) { // 挂载vue
    app.config.globalProperties.getEther = getEther
}

export default MyEthers

web3.js

import Web3 from 'web3'

if (Web3.givenProvider) {
    window.web3 = new Web3(Web3.givenProvider) // eslint-disable-line
} else if (typeof window.ethereum !== 'undefined') {
    window.web3 = new Web3(window.ethereum) // eslint-disable-line
} else if (window.web3) {
    window.web3 = new Web3(window.web3.currentProvider)
}

const MyWeb3 = {}

MyWeb3.install = function (Vue, options) {
    Vue.prototype.web3 = window.web3
}

export default MyWeb3