在我的上一篇文章使用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页面，并完成与合约的交互。敬请期待。