使用solidity与web3创作一个在线小游戏之三：（在VUE中使用WEB3，并使用Truffle包装对象与智能合约交互）_truffle projec

在我的上一篇文章使用solidity与web3创作一个在线小游戏之二：（proxy合约，solidity中的数组与mapping，状态变量的存储模型）_lixiaodog的博客-CSDN博客中，我们完成了proxy合约以及一个可更新的合约，并了解了solidity的存储模型，在本章中，我们将使用vue做框架，并引入web3与truffle-constract，并与我们编写好的合约进行交互。接下来，让我们出发！

1。安装vue开发环境：

在命令行中输入：

$ npm install vue@next

结果如下图：

 

 安装编写单组件的配套工具

npm install -D @vue/compiler-sfc

命令行工具 (CLI)

npm install -g @vue/cli

 

此时vue的开发环境基本安装完成。下面让我们开始进入主题。

 在命令行窗口输入:vue create first

 projecdt-name 我们使用first

 

输入 yarn serve

 

 我们的vue工程就初始化成功了。

按下来我们在命令行中输入：yarn add web3

按下来我们在命令行中输入：yarn add @truffle/contract

 输入：yarn serve，出现如下 错误

 打开命令行：yarn add node-polyfill-webpack-plugin

 在utils文件平下创建js文件：

代码如下：

 引入我的们的合约进行初始化.

在HelloWorld.vue中添加如下代码：

  mounted() {
    var self = this;
 
    myWeb3.web3.eth.getAccounts()
    .then(function(accounts) {
      self.stu = accounts;
 
      console.log(self.stu);
      //   self.stu.push(accounts[0]);
    
     });
  }

 执行：yarn serve

 

打开8080端口如下图：

 

 成功输出了我们的地址，到此，我们已经在VUE中嵌入了WEB3对像，和我们自己的合约抽象对象。在下一单中，我们将使用VUE编写LOGIN页面，并完成与合约的交互。敬请期待。