如何使用Vue.js 开发以太坊DApp

> npm install -g @vue/cli

> vue create crowdfunding

├── package.json
├── public
│   ├── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── CrowdFund.vue
    │   └── HelloWorld.vue
    └── main.js

new Vue({
  render: h => h(App),
}).$mount('#app')

> cd crowdfunding
> npm run serve (或 yarn serve)

> truffle init

pragma solidity >=0.4.21  uint) public joined;

    // 众筹目标
    uint constant Target = 10 ether;

    // 众筹截止时间
    uint public endTime;

    // 记录当前众筹价格
    uint public price  = 0.02 ether ;

    // 作者提取资金之后，关闭众筹
    bool public closed = false;

    // 部署合约时调用，初始化作者以及众筹结束时间
    constructor() public {
        author = msg.sender;
        endTime = now + 30 days;
    }

    // 更新价格，这是一个内部函数
    function updatePrice() internal {
        uint rise = address(this).balance / 1 ether * 0.002 ether;
        price = 0.02 ether + rise;
    }

    // 用户向合约转账时 触发的回调函数
    function () external payable {
        require(now = price, "出价太低了");
        joined[msg.sender] = msg.value;

        updatePrice();
    } 

    // 作者提取资金
    function withdrawFund() external {
        require(msg.sender == author, "你不是作者");
        require(address(this).balance >= Target, "未达到众筹目标");
        closed = true;   
        msg.sender.transfer(address(this).balance);
    }

    // 读者赎回资金
    function withdraw() external {
        require(now > endTime, "还未到众筹结束时间");
        require(!closed, "众筹达标，众筹资金已提取");
        require(Target > address(this).balance, "众筹达标，你没法提取资金");
        
        msg.sender.transfer(joined[msg.sender]);
    }

}

const crowd = artifacts.require("Crowdfunding");

module.exports = function(deployer) {
  deployer.deploy(crowd);
};

  

    
  



import CrowdFund from './components/CrowdFund.vue'

export default {
  name: 'app',
  components: {
    CrowdFund
  }
}

  
 新书众筹
  以最低的价格获取我的新书 

  
  

    
已众筹资金：{{ total }} ETH 
    
 众筹已完成 
    
众筹截止时间：{{ endDate }}
  

  
  

    

       参与价格 
       {{ joinPrice }} ETH 
    

    赎回
  

  
  

    

       当前众筹价格 
       {{ price }} ETH 
    

    参与众筹
  

  
  

     提取资金
  

npm install --save truffle-contract web3

export default {
  name: 'CrowdFund',
  // 定义上面HTML模板中使用的变量
  data() {
    return {
      price: null,
      total: 0,
      closed: true,
      joinPrice: null,
      joined: false,
      endDate: "null",
      isAuthor: true,
    }
  },

  // 当前Vue组件被创建时回调的hook 函数
  async created() {
    //  初始化 web3及账号
    await this.initWeb3Account()
     //  初始化合约实例
    await this.initContract()
     //  获取合约的状态信息
    await this.getCrowdInfo()
  },

  methods: {

    async initWeb3Account() {}
    async initContract() {}
    async getCrowdInfo() {}
  }
}

import Web3 from "web3";

 async initWeb3Account() {
   if (window.ethereum) {
     this.provider = window.ethereum;
     try {
       await window.ethereum.enable();
     } catch (error) {
       //   console.log("User denied account access");
     }
   } else if (window.web3) {
     this.provider = window.web3.currentProvider;
   } else {
     this.provider = new Web3.providers.HttpProvider("http://127.0.0.1:7545");
   }
   this.web3 = new Web3(this.provider);
   this.web3.eth.getAccounts().then(accs  => {
     this.account = accs[0]
   })
 },

import contract from "truffle-contract";
import crowd from '../../build/contracts/Crowdfunding.json';

    async initContract() {
      const crowdContract = contract(crowd)
      crowdContract.setProvider(this.provider)
      this.crowdFund = await crowdContract.deployed()
    },

async getCrowdInfo() {

  // 获取合约的余额
  this.web3.eth.getBalance(this.crowdFund.address).then(
    r => {
      this.total = this.web3.utils.fromWei(r)
    }
  )

  // 获取读者的参与金额
  this.crowdFund.joined(this.account).then(
    r => {
      if (r > 0) {
        this.joined = true
        this.joinPrice = this.web3.utils.fromWei(r)
      }
    }
  )

 // 获取合约的关闭状态
  this.crowdFund.closed().then(
    r => this.closed = r
  )

  // 获取当前的众筹价格
  this.crowdFund.price().then(
    r => this.price = this.web3.utils.fromWei(r)
  )

  // 获取众筹截止时间
  this.crowdFund.endTime().then(r => {
    var endTime = new Date(r * 1000)
    // 把时间戳转化为本地时间
    this.endDate = endTime.toLocaleDateString().replace(/\//g, "-") + " " + endTime.toTimeString().substr(0, 8);
  })

  // 获取众筹创作者地址
  this.crowdFund.author().then(r => {
    if (this.account == r) {
      this.isAuthor = true
    } else {
      this.isAuthor = false
    }
  })

}

join() {
  this.web3.eth.sendTransaction({
    from: this.account,
    to: this.crowdFund.address,
    value: this.web3.utils.toWei(this.price)
  }).then(() =>
    this.getCrowdInfo()
  )
}

withdraw() {
  this.crowdFund.withdraw({
    from: this.account
  }).then(() => {
    this.getCrowdInfo()
  })
},

withdrawFund() {
  this.crowdFund.withdrawFund({
    from: this.account
  }).then(() => {
    this.getCrowdInfo()
  })
}

> npm run serve（或  yarn serve ）

> npm run build（或  yarn build ）

dist
├── css
│   └── app.40b6ecb0.css
├── favicon.ico
├── index.html
└── js
    ├── app.5b2f814c.js
    ├── app.5b2f814c.js.map
    ├── chunk-vendors.787aba35.js
    └── chunk-vendors.787aba35.js.map