使用truffle-box部署合約到區塊鏈並運行

使用truffle-box部署合約到區塊鏈

本文介紹如何使用truffle結合vue框架部署智能合約vue

Truffle是以太坊最流行的開發框架,可以在本地編譯、部署智能合約,使命是讓開發更容易。這裏嘗試搭建環境,運行第一個區塊鏈程序(Dapp)git

1.安裝全局truffle

npm install -g truffle // Version 3.0.5+ required.
npm install -g ethereumjs-testrpc

2.安裝truffle-box

首先咱們須要去truffle官網
clipboard.png
點擊 boxes
裏面有不少搭建好的腳手架,我選擇了一個vue的腳手架。github

truffle unbox wespr/truffle-vue

(安裝過程很漫長,他是連帶着依賴包一塊兒安裝的,有時候會失敗,失敗了能夠自行安裝依賴包)chrome

3.裝好後測試一下代碼

執行:npm

testrpc

clipboard.png

他會給你10個帳戶,以及對應的private keys
testrpc如今改名爲Ganache CLI,實際上是一個東西app

執行vue框架

npm run dev

你會發現文件報錯了工具

clipboard.png
這個緣由是由於咱們尚未在該環境下部署合約區塊鏈

部署合約

新打開一個命令行測試

編譯合約

truffle compile

部署合約

truffle migrate

如何你執行以上兩行代碼會打開truffle.js
那麼在使用truffle命令時帶上腳本的文件擴展名.cmd,例如truffle.cmd compile

隨後在testrpc那個命令行中:
clipboard.png

編譯合約的命令行:
clipboard.png

至此,合約部署完成
接下來刷新vue頁面,
clipboard.png
合約成功部署

可是當你點擊sign up出現報錯
clipboard.png

緣由是咱們還須要另一個工具 ------- MetaMask
這是以太坊的一個輕量級錢包,由於以太坊部署合約,執行合約都須要花費gas,因此咱們須要安裝MetaMask

在chrome中打開應用商店,在裏面搜索MetaMask,安裝它
而後按照他的要求的流程,這裏就很少介紹了,

隨後導入testrpc虛擬的錢包祕鑰private key,他初始會給你100eth

clipboard.png

networks選擇咱們本機的節點以及端口號8545
clipboard.png

配置好以後刷新vue界面,再次點擊sign up

MetaMask會彈出一個支付窗口,點擊確認,合約便開始執行了。

至此,合約部署以及運行完成。

參考文檔

https://www.npmjs.com/package...
https://github.com/ryhope/tru...
https://truffleframework.com/