Ganache + vue-vite + remix 开发自己的第一个DAPP

一、实现的效果（自己写着玩，有什么不对还请指正）

1.发布自己的ERC20

2.ERC721模块

3.经典的pet-shop

4.基础的信息转账模块

二、技术路线

1、准备工作

(1)安装nodejs

(2)ganache

(3)vscode

(4)matemask（浏览器插件）

2、使用remix 部署合约（方便获取ABI）

（1）matemask连接自己的ganache   

对应添加网络就行（注意看自己的ganache的RPC SERVER是什么）

（2）  remix选择matemask注入，ganache连接也可以

remix方便复制合约的ABI

我的ERC20合约：

ERC20.sol:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "./IERC20.sol";
import "./IERC20Metadata.sol";
contract ERC20 is IERC20, IERC20Metadata {

    // 地址余额
    mapping(address => uint256) private _balances;
    
    // 授权地址余额
    mapping(address => mapping(address => uint256)) private _allowances;

    uint256 private _totalSupply; //总量
    string private _name;           //姓名
    string private _symbol;         //代号

    

    // 设定代币名称符号，并初始化铸造了10000000000代币在发布者帐号下。
    constructor() {
        _name = "BigyuanToken";
        _symbol = "yuan";
        _mint(msg.sender, 10000000000);
    }

    function name() public view virtual override returns (string memory) {
        return _name;
    }

    function symbol() public view virtual override returns (string memory) {
        return _symbol;
    }

    /// 小数点位数一般为 18
    function decimals() public view virtual override returns (uint8) {
        return 18;
    }

    // 返回当前流通代币的总量
    function totalSupply() public view virtual  override returns (uint256) {
        return _totalSupply;
    }

    // 查询指定帐号地址余额
    function balanceOf(address account) public view virtual override returns (uint256) {
        return _balances[account];
    }

    // 转帐功能
    function transfer(address to, uint256 amount) public virtual override returns (bool) {
        address owner = msg.sender;
        _transfer(owner, to, amount);
        return true;
    }

    // 获取被授权者可使用授权帐号的可使用余额
    function allowance(address owner, address spender) public view virtual override returns (uint256) {
        return _allowances[owner][spender];
    }

    // 授权指定帐事情可使用自己一定额度的帐户余额。
    // 授权spender, 可将自己余额。使用可使用的余额的总量为amount
    function approve(address spender, uint256 amount) public virtual override returns (bool) {
        address owner = msg.sender;
        _approve(owner, spender, amount);
        return true;
    }

    //approve函数中的spender调用，将授权人 from 帐户中的代币转入to 帐户中
    function transferFrom(
        address from,
        address to,
        uint256 amount
    ) public virtual override returns (bool) {
        address spender = msg.sender;
        _spendAllowance(from, spender, amount);
        _transfer(from, to, amount);
        return true;
    }

    function increaseAllowance(address spender, uint256 addedValue) public virtual returns (bool) {
        address owner = msg.sender;
        _approve(owner, spender, _allowances[owner][spender] + addedValue);
        return true;
    }

    function decreaseAllowance(address spender, uint256 substractedValue) public virtual returns (bool) {
        address owner = msg.sender;
        uint256 currentAllowance = _allowances[owner][spender];
        require(currentAllowance >= substractedValue, "ERC20: decreased allowance below zero");
        unchecked {
            _approve(owner, spender, currentAllowance - substractedValue);
        }
        return true;
    }

    function _transfer(
        address from,
        address to,
        uint256 amount
    ) internal virtual {
        require(from != address(0), "ERC20: transfer from the zero address");
        require(to != address(0), "ERC20: transfer to the zero address");

        _beforeTokenTransfer(from, to, amount);

        uint256 fromBalance = _balances[from];
        require(fromBalance >= amount, "ERC20: transfer amount exceeds balance");
        unchecked {
            _balances[from] = fromBalance - amount;
        }
        _balances[to] += amount;

        emit Transfer(from, to, amount);

        _afterTokenTransfer(from, to, amount);
    }

    function _mint(address account, uint256 amount) internal virtual {
        require(account != address(0), "ERC20: mint to the zero address");

        _beforeTokenTransfer(address(0), account, amount);

        _totalSupply += amount;
        _balances[account] += amount;
        emit Transfer(address(0), account, amount);

        _afterTokenTransfer(address(0), account, amount);
    }

    function _burn(address account, uint256 amount) internal virtual {
        require(account != address(0), "ERC20: burn from the zero address");

        _beforeTokenTransfer(account, address(0), amount);

        uint256 accountBalance = _balances[account];
        require(accountBalance >= amount, "ERC20: burn amount exceeds balance");
        unchecked {
            _balances[account] = accountBalance - amount;
        }
        _totalSupply -= amount;
        emit Transfer(account, address(0), amount);
        _afterTokenTransfer(account, address(0), amount);
    }

    function _approve(
        address owner,
        address spender,
        uint256 amount
    ) internal virtual {
        require(owner != address(0), "ERC20: approve from the zero address");
        require(spender != address(0), "ERC20: approve  to the zero address");

        _allowances[owner][spender] = amount;
        emit Approval(owner, spender, amount);
    }

    function _spendAllowance(
        address owner,
        address spender,
        uint256 amount
    ) internal virtual {
        uint256 currentAllowance = allowance(owner, spender);
        if (currentAllowance != type(uint256).max) {
            require(currentAllowance >= amount, "ERC20: insufficient allowance");
            unchecked {
                _approve(owner, spender, currentAllowance - amount);
            }
        }
    }

    function _beforeTokenTransfer(
        address from,
        address to,
        uint256 amount
    ) internal virtual {}

    function _afterTokenTransfer(
        address from,
        address to,
        uint256 amount
    ) internal virtual {}
}

IERC20.sol:

// SPDX-License-Identifier: MIT
//file IERC20.sol
pragma solidity ^0.8.0;

interface IERC20 {
    // 总发行量
    function totalSupply() external view returns (uint256);
    // 查看地址余额
    function balanceOf(address account) external view returns (uint256);
    /// 从自己帐户给指定地址转账
    function transfer(address account, uint256 amount) external returns (bool);
    // 查看被授权人还可以使用的代币余额
    function allowance(address owner, address spender) external view returns (uint256);
    // 授权指定帐户使用你拥有的代币
    function approve(address spender, uint256 amount) external returns (bool);
    // 从一个地址转账至另一个地址，该函数只能是通过approver授权的用户可以调用
    function transferFrom(
        address from,
        address to,
        uint256 amount
    ) external returns (bool);

    /// 定义事件，发生代币转移时触发
    event Transfer(address indexed from, address indexed to, uint256 value);
    /// 定义事件 授权时触发
    event Approval(address indexed owner, address indexed spender, uint256 value);
}

IERC20metadata.sol:

// SPDX-License-Identifier: MIT
//file IERC20Metadata.sol
pragma solidity ^0.8.0;
import "./IERC20.sol";
interface IERC20Metadata is IERC20 {
    // 代币名称, 如:BitCoin
    function name() external view returns (string memory);
    // 代币符号或简称, 如:BTC
    function symbol() external view returns (string memory);
    // 代币支持的小数点后位数，若无特别需求，我们一般默认采用18位。
    function decimals() external view returns (uint8);
}

部署合约后复制合约的ABI 从交易信息中复制合约的地址

三、步骤
1、clone我的代码

threshermagnus484159/MY_DAPP (github.com)

2、执行npm i 

3、打开ganache，连接matemask到ganache

4、打开remix，选择matamask注入，选择自己的ganache地址，部署合约，复制合约的ABI和地址分别替换，adoption.vue 和 ERC20.vue 中的合约地址和合约ABI

5、最后输入npm run dev 

四、点赞收藏无偿分享

五、有任何问题欢迎打扰