Win10安装truffle+vue-cli运行一个以太坊dapp

安装truffle

• 与Ubuntu系统不同，这里直接安装就成功了

F:\ethProjects\simple_voting_dapp_truffle>npm install -g truffle@4.1.14
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
D:\SoftWares\Node.js\node_global\truffle -> D:\SoftWares\Node.js\node_global\node_modules\truffle\build\cli.bundled.js
+ truffle@4.1.14
added 85 packages from 319 contributors in 135.409s

F:\ethProjects\simple_voting_dapp_truffle>truffle -v
Truffle v4.1.14 - a development framework for Ethereum

Usage: truffle <command> [options]

• 以管理员身份运行powershell ，执行truffle init 报错

PS F:\ethProjects\test> truffle init
truffle : 无法加载文件 D:\SoftWares\Node.js\node_global\truffle.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 h
ttps:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ truffle init
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS F:\ethProjects\test>

原因：powershell 默认不允许执行 .psl 文件。相关解释

解决方法

PS F:\ethProjects\test> set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y
PS F:\ethProjects\test>

powershell安装Ganache-cli web3, solc

Windows浏览器中的metamask无法连上虚拟机中的ganache-cli,就此作罢，因而在Windows中安装ganache-cli

PS F:\ethProjects\test> npm install -g ganache-cli solc@0.4.25 web3@0.20.1
D:\SoftWares\Node.js\node_global\ganache-cli -> D:\SoftWares\Node.js\node_global\node_modules\ganache-cli\cli.js
D:\SoftWares\Node.js\node_global\solcjs -> D:\SoftWares\Node.js\node_global\node_modules\solc\solcjs

> keccak@3.0.1 install D:\SoftWares\Node.js\node_global\node_modules\ganache-cli\node_modules\keccak
> node-gyp-build || exit 0


> secp256k1@4.0.2 install D:\SoftWares\Node.js\node_global\node_modules\ganache-cli\node_modules\secp256k1
> node-gyp-build || exit 0

+ web3@0.20.1
+ solc@0.4.25
+ ganache-cli@6.12.2
added 176 packages from 227 contributors in 55.997s
PS F:\ethProjects\test>

• 昨天晚上truffle console怎么也连不上Ganache-cli, 今天早上重新连，直接就连上？？？，开一个powershell 运行ganache-cli， 使用truffle console 测试能否连上

PS F:\ethProjects\simple_voting_dapp_truffle> truffle console
truffle(development)> web3.eth.accounts
[
  '0xad30d0db617d77a71f75bdc75ccea5ee5a27f942',
  '0xd2b4caf81679ba3f9897567688bae53bf780a188',
  '0x907e316d9db85f33d04dd9000994b4dc9f7b9028',
  '0x9fd2b9ff33606e64c383d2e918842f7fe90b5c39',
  '0x3b26234e95eebadc8e9f7c981f11ba8f4dd453d2',
  '0xe3c37e17a62ef3e8612a3003864ba790817e8c2b',
  '0xa2d8b8c06a4e4b91621aeaad106728bd168436ea',
  '0xc14ede50057756c0444a46b80d1965eee22aa589',
  '0xccdefa378252e1e846aa40c150f984cd9665c96c',
  '0x4b3b6b221d5ba1e719a37532e9afe21a298c3cf3'
]
truffle(development)>

truffle文件夹文件引入

• 首先使用vue create projectxxx 创建vue-cli项目。（前提是已经安装过vue）
• vue中安装dapp js脚本文件中使用到的包，如web3, truffle contract…
• 将truffle init 文件下的文件复制到vue-cli项目的文件夹中，修改truffle-config.js中的网络配置和Ganache-cli一致。
• 开启Ganache-cli ,命令 truffle compile 和 truffle migrate 可以正常使用
• 运行项目时使用 npm run serve
• 目录结构如下：
  
• 将 App.vue中的组件HelloWorld.vue替换成Voting.vue。Voting.vue中template内容就是原HTML的body部分。
• truffle unbox结构项目中的app.js 改成了_app.js放置在src/asserts/js/文件夹下。在Voting.vue中导入该js文件即可使用。需要修改其中部分错误。

tips :

• truffle部署合约发送交易，默认使用Ganache-cli中的第一个账户，

• truffle projects中的网页连接上metamask之后，web3.eth.accounts[0]为metamask账户（前提：metamask需要和当前网页connected，需要在metamask上手动设置）

• truffle init必须在一个空文件夹中,如下所示：

PS F:\ethProjects\vue_truffle_test\vue_truffle_ganache_01> truffle init
Downloading...
Error: Something already exists at the destination. `truffle init` and `truffle unbox` must be executed in an empty folder. Stopping to prevent overwriting data.
    at D:\SoftWares\Node.js\node_global\node_modules\truffle\build\webpack:\packages\truffle-box\lib\utils\unbox.js:22:1
PS F:\ethProjects\vue_truffle_test\vue_truffle_ganache_01>

• vue-cli中引入在线js文件，可以在public/index.html中头部引入
• metamask中的自定义rpc网络设置成localhost:8545时，运行vue-cli项目，vue-cli同时分配了一个网络请求的ip地址，当调用metamask中的web3请求调用合约rpc时，网页自动使用了该分配网络ip地址请求，结果失败。将metamask中的自定义rpc网络ip部分修改为127.0.0.1即可。
• 必须在_app.js文件中导入import $ from ‘jquery’ ，$ 符号才可以使用，main.js中导入没有被使用？？

附

• Ubuntu系统启动Ganache-cli
  启动时设置networkid ganache-cli -networkId 1234且默认chainId 为1337,相关知识

• metamask中导入Ganache-cli中的账户
  只要在metamask中点击导入账户，输入私钥，即可成功自动得到对应的账户名和余额信息