[vue以太开发] Vue.js 开发以太坊DApp

步骤

1

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
            

2 合约

truffle init

npm install --save truffle-contract web3

3 报错问题

vue.config.js

const { defineConfig } = require('@vue/cli-service');
const path = require('path');

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin({})
    ]
  },
  transpileDependencies: true,
};

编译合约 编译的版本问题

  compilers: {
    solc: {
      version: "0.4.26",      // Fetch exact version from solc-bin (default: truffle's version)
      // docker: true,        // Use "0.5.1" you've installed locally with docker (default: false)
      // settings: {          // See the solidity docs for advice about optimization and evmVersion
      //  optimizer: {
      //    enabled: false,
      //    runs: 200
      //  },
      //  evmVersion: "byzantium"
      // }
    }
  },

获取合约 this.crowdFund = await crowdContract.deployed() 改成对应的合约地址

  const crowdContractAdress ='0x2E93F6955CA0815D2742708c4aB31Bc483C275B1';

this.crowdFund = await crowdContract.at(crowdContractAdress);

获取合约的字段转为fromWei 转换为bn

this.web3.utils.toBN(r)