├── .gitattributes ├── .gitignore ├── README.md ├── README_files ├── 1.jpg └── 2.jpg ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── iconfont │ │ └── iconfont.js │ └── images │ │ ├── logo-drizzle.png │ │ ├── logo-ganache.png │ │ ├── logo-truffle.png │ │ └── logo-vue.png ├── components │ ├── GetAccountData.vue │ ├── NotConnect.vue │ ├── SimpleStorage │ │ ├── GetContractData.vue │ │ └── SetContractData.vue │ ├── Tittle.vue │ ├── Tool │ │ ├── ColHelper.vue │ │ └── IconSvg.vue │ └── TutorialToken │ │ ├── GetBalance.vue │ │ ├── GetSymbol.vue │ │ ├── GetTotalSupply.vue │ │ ├── Introduction.vue │ │ └── Transfer.vue ├── drizzleOptions.js ├── main.js ├── router │ └── index.js ├── store │ └── index.js └── views │ ├── About.vue │ ├── Home.vue │ ├── SimpleStorage.vue │ └── TutorialToken.vue ├── vue.config.js └── webstorm.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dapp-client 2 | - ETH Dapp 客户端 脚手架 (Truffle+Drizzle+Vue) 欢迎Star🎉 3 | ![首页](README_files/1.jpg) 4 | ![TutorialToken](README_files/2.jpg) 5 | 6 | ### 项目集成npm包 7 | #### Core 8 | 1. vue: 2.6.11 9 | 2. vue-router: 3.1.6 10 | 3. vuex:3.3.0 11 | 4. @drizzle/vue-plugin: 0.1.1 12 | #### UI 13 | 1. view-design: 4.1.3 14 | #### Development 15 | 1. @vue/cli-service: 4.3.0 16 | 2. @vue/cli-plugin-router: 4.3.0 17 | 3. @vue/cli-plugin-vuex: 4.3.0 18 | 4. vue-template-compiler: 2.6.11 19 | 20 | ### 启动 21 | #### 环境 22 | - os: Windows 10 Pro 1903 23 | - node: v12.16.1 24 | - npm: 6.13.4 25 | - @vue/cli: 4.2.3 26 | - chrome plugins: MetaMask 27 | #### 导入 28 | 1. 打开 vue控制台: 29 | > vue ui 30 | 2. 导入项目 31 | 3. 完成 32 | #### IDE配置(WebStorm) 33 | - (推荐) 在设置中 Webpack 添加WebStorm.config.js 路径. 使项目支持vue路径解析 34 | - (可选) 配置 Scopes 35 | 36 | ### 备注 37 | #### MetaMask 38 | - 请确保 MetaMask 为最新版本并做好相关配置工作 39 | - 若遇到转账交易失败,请注意 MetaMask 配置 或将 MetaMask 数据清除重置 40 | #### Icon 41 | - 图标采用 view-design库 和 Iconfont库. 42 | - view-design风格图标使用方式请查询官方文档 43 | - Iconfont风格图标 使用 IconSvg.vue 组件引用 44 | - 若添加图标 请前往 [Iconfont库官网](https://www.iconfont.cn/) 下载对应图标的二进制JS文件 45 | 导入至 assets/iconfont 目录下 46 | 47 | ### 完成 48 | - end -------------------------------------------------------------------------------- /README_files/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/README_files/1.jpg -------------------------------------------------------------------------------- /README_files/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/README_files/2.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dapp-client", 3 | "version": "0.0.1", 4 | "description": "Dapp客户端", 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@drizzle/vue-plugin": "^0.1.1", 11 | "view-design": "^4.1.3", 12 | "vue": "^2.6.11", 13 | "vue-router": "^3.1.6", 14 | "vuex": "^3.1.3" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-router": "~4.3.0", 18 | "@vue/cli-plugin-vuex": "^4.3.0", 19 | "@vue/cli-service": "~4.3.0", 20 | "vue-template-compiler": "^2.6.11" 21 | }, 22 | "browserslist": [ 23 | "> 1%", 24 | "last 2 versions", 25 | "not dead" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | dapp-client 10 | 11 | 12 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 41 | 64 | 65 | -------------------------------------------------------------------------------- /src/assets/iconfont/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(d){var t,h='',l=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(l&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()};document.addEventListener("DOMContentLoaded",l,!1)}else document.attachEvent&&(a=t,i=d.document,n=!1,(h=function(){try{i.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}e()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,e())});function e(){n||(n=!0,a())}var a,i,n,h}(function(){var t,l,e,a,i,n;(t=document.createElement("div")).innerHTML=h,h=null,(l=t.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",e=l,(a=document.body).firstChild?(i=e,(n=a.firstChild).parentNode.insertBefore(i,n)):a.appendChild(e))})}(window); -------------------------------------------------------------------------------- /src/assets/images/logo-drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-drizzle.png -------------------------------------------------------------------------------- /src/assets/images/logo-ganache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-ganache.png -------------------------------------------------------------------------------- /src/assets/images/logo-truffle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-truffle.png -------------------------------------------------------------------------------- /src/assets/images/logo-vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EAWWAM21/dapp-client/f75825a4f8dd7a66b915ce3f38e8650a2a9b4661/src/assets/images/logo-vue.png -------------------------------------------------------------------------------- /src/components/GetAccountData.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 67 | 68 | -------------------------------------------------------------------------------- /src/components/NotConnect.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/SimpleStorage/GetContractData.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | -------------------------------------------------------------------------------- /src/components/SimpleStorage/SetContractData.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 59 | 60 | -------------------------------------------------------------------------------- /src/components/Tittle.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/Tool/ColHelper.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/Tool/IconSvg.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 31 | -------------------------------------------------------------------------------- /src/components/TutorialToken/GetBalance.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 43 | 44 | -------------------------------------------------------------------------------- /src/components/TutorialToken/GetSymbol.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/TutorialToken/GetTotalSupply.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/TutorialToken/Introduction.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/TutorialToken/Transfer.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 63 | 64 | -------------------------------------------------------------------------------- /src/drizzleOptions.js: -------------------------------------------------------------------------------- 1 | import SimpleStorage from './contracts/SimpleStorage.json' 2 | import TutorialToken from './contracts/TutorialToken.json' 3 | 4 | const options = { 5 | //web3 6 | web3: { 7 | block: false, 8 | fallback: { 9 | type: 'ws', 10 | url: 'ws://127.0.0.1:9545' 11 | } 12 | }, 13 | // 受监控的智能合约 14 | contracts: [SimpleStorage, TutorialToken], 15 | events: { 16 | SimpleStorage: ['StorageSet'] 17 | }, 18 | // 每15000毫秒检查一次账户 19 | polls: { 20 | accounts: 15000 21 | } 22 | } 23 | 24 | export default options 25 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import store from './store' 4 | import router from './router' 5 | import Vuex from 'vuex' 6 | import ViewUI from 'view-design' 7 | import 'view-design/dist/styles/iview.css' 8 | import '@/assets/iconfont/iconfont.js' 9 | 10 | import drizzleVuePlugin from '@drizzle/vue-plugin' 11 | import drizzleOptions from './drizzleOptions' 12 | 13 | 14 | Vue.use(ViewUI) 15 | Vue.use(Vuex) 16 | // 注册 drizzleVuePlugin 17 | Vue.use(drizzleVuePlugin, {store, drizzleOptions}) 18 | Vue.config.productionTip = false 19 | 20 | new Vue({ 21 | router, 22 | store, 23 | render: function (h) { 24 | return h(App) 25 | } 26 | }).$mount('#app') 27 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '@/views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | }, 13 | { 14 | path: '/simpleStorage', 15 | name: 'SimpleStorage', 16 | // 这将为该路由生成单独一个JS块 (about.[hash].js) 17 | // 当路径被访问时采用懒加载,速度比import导入快 (推荐写法) 18 | component: function () { 19 | return import(/* webpackChunkName: "simpleStorage" */ '@/views/SimpleStorage.vue') 20 | } 21 | }, 22 | { 23 | path: '/tutorialToken', 24 | name: 'TutorialToken', 25 | component: function () { 26 | return import(/* webpackChunkName: "tutorialToken" */ '@/views/TutorialToken.vue') 27 | } 28 | }, 29 | { 30 | path: '/about', 31 | name: 'About', 32 | component: function () { 33 | return import(/* webpackChunkName: "about" */ '@/views/About.vue') 34 | } 35 | }, 36 | ] 37 | 38 | const router = new VueRouter({ 39 | routes 40 | }) 41 | 42 | export default router 43 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 38 | 39 | 49 | 50 | -------------------------------------------------------------------------------- /src/views/SimpleStorage.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/views/TutorialToken.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 43 | 44 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { 3 | extract: false, 4 | sourceMap: true 5 | } 6 | } -------------------------------------------------------------------------------- /webstorm.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | 4 | function resolve(dir) { 5 | return path.join(__dirname, '.', dir) 6 | } 7 | 8 | module.exports = { 9 | context: path.resolve(__dirname, './'), 10 | resolve: { 11 | extensions: ['.js', '.vue', '.json'], 12 | alias: { 13 | '@': resolve('src'), 14 | } 15 | }, 16 | } --------------------------------------------------------------------------------