Vue+web3.js+solidity+truffle开发以太坊区块链合约部署全过程！（注意：这里没有使用truffle-contract库调用智能合约）

运行代码的时候有一个注意事项：

就是在调用deploy()方法部署合约的时候，会弹出Metamask付款，可能出现2个问题：

第一：你的gas不够，可以参考send方法的gas设置（我是设置默认，付款的时候，修改大点）http://cw.hubwiz.com/card/c/web3.js-1.0/1/4/6/ 

第二个问题：错误提示：Error: the tx doesn't have the correct nonce. account has nonce of: 0 tx has nonce of: 5"}"

意思就是你的发送账号操作太频繁了，你可以把此账号移除，换一个新账号付款即可！可以参考这篇文章：https://yq.aliyun.com/articles/617053  

案例输出结果为：

 * 说明：Vue+truffle+web3.js(1.0版本)开发的以太坊区块链案例！
 * 注意：本案例中没有使用truffle-contract库调用智能合约！
 * 关于使用truffle-contract库与solidity智能合约交互的案例后续分享新版本！


import Web3 from 'web3';
// 导入FirstContract.sol智能合约的ABI编码数据！
import first_contract_json from '@/truffle/build/contracts/FirstContract.json';


class FirstContractWeb3 {
    constructor () {
        this.init_web3_1_0_version();
        this.initContract();
        // this.initContract_deploy();
    }

    
// web3对象初始化(仅兼容web3.js 1.0版本)
    init_web3_1_0_version() {
        // 如果浏览器安装了Metamask钱包(如：谷歌、火狐),那么Web3.givenProvider等于Metamask
        // 如果浏览器没有安装或不支持Metamask,那么Web3.givenProvider等于null
        console.log("判断浏览器是否启用Metamask插件的对象Web3.givenProvider结果为：",Web3.givenProvider);
        this.web3 = new Web3(Web3.givenProvider || new Web3.providers.HttpProvider('http://127.0.0.1:8545'));

    }

    /**
     * 1、初始化web3.eth.Contract合约
     * 2、直接调用truffle手动部署成功的合约实例(合约地址)
     * 注意：from发送账户务必注意两点：1、必须存在于区块链上; 2、浏览器访问Metamask的账户必须是发送地址账户！
     */
    initContract () {
        // 基于原生的web3.eth.Contract对象来创建合约（调用合约的方法）
        let fist_contract = new this.web3.eth.Contract( first_contract_json.abi,
            '0xC5DF1c7cbd988293313e63826009c76dA3D362d1' );

        // 调用合约的只读方法，并在EVM中直接执行方法，不需要发送任何交易。因此不会改变合约的状态。
        fist_contract.methods.getInfo().call().then( ( result ) => {
            console.log( 'get已经执行了' );
            console.log( result );
        } );
        // 向合约发送交易来执行指定方法，将改变合约的状态(必须输入发送交易的账户地址,需要消耗gas)
        fist_contract.methods.setInfo( 'kirin2019', 18 ).send( { from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52' } ).then( ( result ) => {
            console.log( 'set已经执行了' );
            console.log( result );
        } );
    }

    /**
     * 1、初始化web3.eth.Contract合约
     * 2、调用合约的deploy()方法将其自动部署到区块链上！
     * 注意：from发送账户务必注意两点：1、必须存在于区块链上; 2、浏览器访问Metamask的账户必须是发送地址账户！
     */
    initContract_deploy () {
        // 基于原生的web3.eth.Contract对象来创建合约（调用合约的方法）
        let fist_contract = new this.web3.eth.Contract( first_contract_json.abi );

        // 这里是程序部署合约,一旦合约部署成功,其返回的Promise对象,将在成功部署后解析为新的合约实例。
        fist_contract.deploy( {
            data: first_contract_json.bytecode,
        } ).send( {
            from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52',
        } ).then( ( instance ) => {
            // 返回一个已经部署成功的合约实例！
            console.log( 'instance', instance );
            instance.methods.getInfo().call().then( ( result ) => {
                console.log( 'get已经执行了' );
                console.log( result );
            } ).catch( ( error ) => {
                throw error;
            } );
            // 调用合约实例set方法
            instance.methods.setInfo( 'kirin2019', 18 ).send( { from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52' } ).then( ( result ) => {
                console.log( 'set已经执行了' );
                console.log( result );
            } ).catch( ( error ) => {
                throw error;
            } );
        });
    }
}

// 测试执行！
let first_contract = new FirstContractWeb3();