├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── index.js ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Zhang Wei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue_ipc 2 | 3 | A IPC Render Plugin for vue + electron, you can simply communicate with electron main process, just like ajax。 4 | 5 | 6 | ## Install 7 | 8 | ```bash 9 | npm run install vue_ipc 10 | # or 11 | yarn add vue_ipc 12 | ``` 13 | 14 | ## Usage 15 | 16 | Firstly, import your Vue project: 17 | 18 | ```js 19 | // main.js 20 | import Vue from 'vue' 21 | import App from './App.vue' 22 | import router from './router' 23 | import store from './store' 24 | import VueIPC from 'vue_ipc'; 25 | 26 | + Vue.use(VueIPC); 27 | 28 | Vue.config.productionTip = false; 29 | 30 | new Vue({ 31 | router, 32 | store, 33 | render: h => h(App) 34 | }).$mount('#app') 35 | ``` 36 | 37 | You can use `$ipcRenderer` object to send and listen message: 38 | 39 | ```js 40 | export default { 41 | name: "Home", 42 | data() { 43 | return { 44 | loading: false, 45 | error: null 46 | }; 47 | }, 48 | created() { 49 | // send message to main process 50 | + this.$ipcRenderer.send("GET", "/video/list?type=history"); 51 | // listen response message from main process 52 | + this.$ipcRenderer.once("SERVER_NORMAL_MSG", data => { 53 | this.videos = data.video; 54 | }); 55 | } 56 | }; 57 | ``` 58 | 59 | The edit Electron `main.js/background.js`,like this: 60 | 61 | ```js 62 | import { ipcMain } from 'electron'; 63 | import axios from 'axios'; 64 | 65 | const API_ADDRESS = "https:www.xxx.com/api"; 66 | 67 | ipcMain.on("CLIENT_NORMAL_MSG", async (event, arg) => { 68 | let remote_url = `${API_ADDRESS}${arg.url}`; 69 | try { 70 | let res = await axios.get(remote_url); 71 | if (res.status === 200) { 72 | event.reply("SERVER_NORMAL_MSG", res.data) 73 | } 74 | } catch (e) { 75 | event.reply(SERVER_NORMAL_MSG, { 76 | success: false, 77 | error: `server error code: ${e.status} msg: ${e.message}` 78 | }) 79 | } 80 | }) 81 | ``` 82 | 83 | ## Methods 84 | | Method | type | Description | 85 | | :----- | :--- | :------------------------------------------------------------------------------------------------------------- | 86 | | send | func | Send message to electron main process from render process, accept `method`,`URL`,`body` three arguments | 87 | | once | func | listen message from electron main process to render process, accept a signal argument and a callback function | 88 | 89 | ## Send Function Arguments 90 | 91 | | Name | type | Description | 92 | | :----- | :----- | :------------------------------------------------------------------- | 93 | | method | String | Normal HTTP Request methods | 94 | | URL | String | api url | 95 | | body | Object | This is an optional argument,if you use GET method,you can ignore it | 96 | 97 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { ipcRenderer } from "electron"; 2 | 3 | const VueIPC = Object.create(null); 4 | 5 | function checkMethod(method) { 6 | const methods = ["GET", "POST", "DELETE", "HEAD"]; 7 | if (methods.indexOf(method) > -1) { 8 | return method; 9 | } else { 10 | throw Error("Your method name is invalid,please input correct method name") 11 | } 12 | } 13 | 14 | function checkUrl(url) { 15 | if (val === null || typeof url !== 'string') { 16 | throw Error("Please input valid URL route!") 17 | }; 18 | return url 19 | } 20 | function isObject(val) { 21 | if ((typeof val === 'function') || (typeof val === 'object')) { 22 | return true 23 | } else { 24 | throw Error("body argument should be a Object Type!") 25 | } 26 | } 27 | 28 | VueIPC.install = Vue => { 29 | Vue.prototype.$ipcRenderer = { 30 | send: (method, url, body) => { 31 | if (!checkMethod(method)) { 32 | return; 33 | } 34 | ipcRenderer.send("CLIENT_NORMAL_MSG", { 35 | method: checkMethod(method), 36 | url: checkUrl(url), 37 | body: body ? JSON.stringify(isObject(body)) : null// 可选参数body 38 | }); 39 | 40 | }, 41 | once: (event, callback) => { 42 | ipcRenderer.once("SERVER_NORMAL_MSG", (event, args) => { 43 | callback(args) 44 | }) 45 | } 46 | } 47 | // 监听主进程的消息 48 | } 49 | 50 | export default VueIPC 51 | 52 | 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_ipc", 3 | "version": "1.0.4", 4 | "description": "A IPC Render Plugin for vue + electron ", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ZhangWei-KUMO/vue_ipc.git" 12 | }, 13 | "keywords": [ 14 | "vue", 15 | "ipc", 16 | "electron", 17 | "plugin" 18 | ], 19 | "eslintConfig": { 20 | "root": true, 21 | "env": { 22 | "node": true 23 | }, 24 | "extends": [ 25 | "plugin:vue/essential", 26 | "eslint:recommended" 27 | ], 28 | "parserOptions": { 29 | "parser": "babel-eslint" 30 | }, 31 | "rules": {} 32 | }, 33 | "author": "zhangwei", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/ZhangWei-KUMO/vue_ipc/issues" 37 | }, 38 | "homepage": "https://github.com/ZhangWei-KUMO/vue_ipc#readme", 39 | "dependencies": { 40 | "vue": "^2.6.11" 41 | }, 42 | "devDependencies": { 43 | "electron": "9.1.0", 44 | "@vue/cli-plugin-babel": "~4.4.0", 45 | "eslint": "^7.3.1" 46 | } 47 | } --------------------------------------------------------------------------------