├── demo.png
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── mine.png
    ├── main.js
    ├── App.vue
    ├── views
    │   ├── home.vue
    │   ├── image.vue
    │   └── about.vue
    ├── router
    │   └── index.js
    ├── components
    │   └── ImageList.vue
    └── background.js
├── .gitignore
├── README.md
├── vue.config.js
└── package.json


/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunniejs/electron-vue-cli3-demo/HEAD/demo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunniejs/electron-vue-cli3-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunniejs/electron-vue-cli3-demo/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/mine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunniejs/electron-vue-cli3-demo/HEAD/src/assets/mine.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | Vue.config.productionTip = false
 5 | 
 6 | new Vue({
 7 |   router,
 8 |   render: h => h(App)
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: 'app',
 9 |   components: {
10 | 
11 |   }
12 | }
13 | </script>
14 | 
15 | <style>
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <ImageList />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import ImageList from '@/components/ImageList.vue'
10 | 
11 | export default {
12 |   name: 'home',
13 |   components: {
14 |     ImageList
15 |   }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/.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 | 
23 | #Electron-builder output
24 | /dist_electron


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # electron-vue-example
 2 | 
 3 | 从零开始搭建，基于 electron vue cli3 的桌面应用。[项目介绍](https://juejin.im/post/5d0af5d2f265da1b614ffd72).
 4 | 
 5 | ## 如何运行实例
 6 | 
 7 | ```
 8 | // 克隆
 9 | git clone https://github.com/sunniejs/electron-vue-cli3-demo.git
10 | // 安装依赖
11 | npm install
12 | // 运用
13 | electron:serve
14 | 
15 | ```
16 | 
17 | ## 截图
18 | 
19 | ![demo](./demo.png)
20 | 


--------------------------------------------------------------------------------
/src/views/image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img :src="imageUrl" alt="image">
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { ipcRenderer } from 'electron';
 9 | 
10 | export default {
11 |   created() {
12 |     // 接受background.js 中发来的消息
13 |     ipcRenderer.on('image', (event, arg) => {
14 |       this.imageUrl = arg
15 |     })
16 |   },
17 |   data() {
18 |     return {
19 |       imageUrl: ''
20 |     }
21 |   }
22 | }
23 | </script>
24 | 
25 | <style scoped>
26 | img {
27 |   max-width: 100%;
28 | }
29 | </style>
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/src/views/about.vue:
--------------------------------------------------------------------------------
 1 |   <template>
 2 |   <div class="about">
 3 |     <div>您可以扫描添加下方的微信并备注 Soul 加前端交流群，交流学习。</div>
 4 |     <div><img :src="image" alt=""></div>
 5 |     <div>electron-vue-cli3-demo</div>
 6 |     <div>https://github.com/sunnie1992/electron-vue-cli3-demo</div>
 7 |   </div>
 8 | </template>
 9 |  <script>
10 | 
11 | export default {
12 |   name: 'about',
13 |   data() {
14 |     return {
15 |       image: require('../assets/mine.png')
16 |     }
17 |   }
18 | 
19 | }
20 | </script>
21 | <style >
22 | .about {
23 |   display: flex;
24 |   flex-direction: column;
25 |   text-align: center;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>electron-vue-example</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but electron-vue-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | 
 4 | function resolve(dir) {
 5 |   return path.join(__dirname, dir)
 6 | }
 7 | // const name = 'electron-vue-example' // page title
 8 | const port = 9020
 9 | module.exports = {
10 |   // publicPath: '/',
11 |   // outputDir: 'dist',
12 |   // assetsDir: 'static',
13 |   // lintOnSave: process.env.NODE_ENV === 'development',
14 |   // productionSourceMap: false,
15 |   devServer: {
16 |     port: port
17 |     //   open: true,
18 |     //   overlay: {
19 |     //     warnings: false,
20 |     //     errors: true
21 |     //   }
22 |   },
23 |   chainWebpack(config) {
24 |     // alias
25 |     config.resolve.alias.set('@', resolve('src'))
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export const constantRouterMap = [
 7 |   {
 8 |     path: '/',
 9 |     redirect: '/home'
10 |   },
11 |   {
12 |     path: '/home',
13 |     name: 'home',
14 |     component: () => import('@/views/home')
15 |   },
16 |   {
17 |     path: '/image',
18 |     name: 'image',
19 |     component: () => import('@/views/image.vue')
20 |   },
21 |   {
22 |     path: '/about',
23 |     name: 'about',
24 |     component: () => import('@/views/about.vue')
25 |   }
26 | ]
27 | const router = new Router({
28 |   // mode: 'history', // require service support
29 |   base: process.env.BASE_URL,
30 |   scrollBehavior: () => ({ y: 0 }),
31 |   routes: constantRouterMap
32 | })
33 | 
34 | export default router
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "electron-vue-example",
 3 |   "version": "0.1.0",
 4 |   "description": "Electron vue cli3 demo ",
 5 |   "author": "Sunnie",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "lint": "vue-cli-service lint",
11 |     "electron:build": "vue-cli-service electron:build",
12 |     "electron:serve": "vue-cli-service electron:serve",
13 |     "postinstall": "electron-builder install-app-deps",
14 |     "postuninstall": "electron-builder install-app-deps"
15 |   },
16 |   "main": "background.js",
17 |   "dependencies": {
18 |     "axios": "^0.19.0",
19 |     "core-js": "^2.6.5",
20 |     "vue": "^2.6.10",
21 |     "vue-router": "^3.0.6"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.8.0",
25 |     "@vue/cli-plugin-eslint": "^3.8.0",
26 |     "@vue/cli-service": "^3.8.0",
27 |     "babel-eslint": "^10.0.1",
28 |     "electron": "^5.0.0",
29 |     "eslint": "^5.16.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "vue-cli-plugin-electron-builder": "^1.3.4",
32 |     "vue-template-compiler": "^2.6.10"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "rules": {},
44 |     "parserOptions": {
45 |       "parser": "babel-eslint"
46 |     }
47 |   },
48 |   "postcss": {
49 |     "plugins": {
50 |       "autoprefixer": {}
51 |     }
52 |   },
53 |   "browserslist": [
54 |     "> 1%",
55 |     "last 2 versions"
56 |   ]
57 | }


--------------------------------------------------------------------------------
/src/components/ImageList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <ul class="list-group list-group-flush">
  4 |       <li class="list-group-item flex-container" v-for="item in brands" :key="item.id" @click="openImage(item.thumbnail)">
  5 |         <img :src="item.thumbnail" alt="thumb" class="thumbnail">
  6 |         <div>{{ item.title }}</div>
  7 |       </li>
  8 |     </ul>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | const axios = require("axios");
 14 | // remote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。
 15 | const { remote, ipcRenderer } = require("electron")
 16 | // menu 类可以用来创建原生菜单
 17 | const { Menu } = remote
 18 | 
 19 | export default {
 20 |   name: 'ImageList',
 21 |   props: {
 22 |     msg: String
 23 |   },
 24 |   data() {
 25 |     return {
 26 |       brands: []
 27 |     }
 28 |   },
 29 |   created() {
 30 |     this.initMenu()
 31 |     // 请求数据
 32 |     axios.get("https://www.easy-mock.com/mock/5d0b34f3ad411636d13589e3/electron/brands")
 33 |       .then(response => {
 34 |         this.brands = response.data.data.brands
 35 |       })
 36 |       .catch(error => {
 37 |         console.log(error)
 38 |       })
 39 |   },
 40 |   methods: {
 41 |     initMenu() { // 初始化菜单
 42 |       const menu = Menu.buildFromTemplate([
 43 |         {
 44 |           label: "文件",
 45 |           submenu: [
 46 |             {
 47 |               label: "设置",
 48 |               accelerator: "CmdOrCtrl+,",
 49 |               click: () => {
 50 |                 ipcRenderer.send("toggle-about");
 51 |               }
 52 |             },
 53 |             { type: "separator" },
 54 |             {
 55 |               label: "退出",
 56 |               accelerator: "CmdOrCtrl+Q"
 57 |             }
 58 |           ]
 59 |         },
 60 |         {
 61 |           label: "演示菜单",
 62 |           submenu: [
 63 |             { label: "菜单 1" },
 64 |             { label: "菜单 2" },
 65 |             { label: "菜单 3" }
 66 |           ]
 67 |         }
 68 |       ]);
 69 |       Menu.setApplicationMenu(menu);
 70 |     },
 71 |     openImage(image) {
 72 | 
 73 |       ipcRenderer.send("toggle-image", image)
 74 |     }
 75 |   }
 76 | }
 77 | </script>
 78 | 
 79 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 80 | <style scoped>
 81 | h3 {
 82 |   margin: 40px 0 0;
 83 | }
 84 | ul {
 85 |   list-style-type: none;
 86 |   padding: 0;
 87 | }
 88 | li {
 89 |   display: inline-block;
 90 |   margin: 0 10px;
 91 | }
 92 | a {
 93 |   color: #42b983;
 94 | }
 95 | 
 96 | .list-group {
 97 |   display: -ms-flexbox;
 98 |   display: flex;
 99 |   -ms-flex-direction: column;
100 |   flex-direction: column;
101 |   padding-left: 0;
102 |   margin-bottom: 0;
103 | }
104 | 
105 | .list-group-item {
106 |   position: relative;
107 |   display: block;
108 |   padding: 0.75rem 1.25rem;
109 |   margin-bottom: -1px;
110 |   background-color: #fff;
111 |   border: 1px solid rgba(0, 0, 0, 0.125);
112 | }
113 | 
114 | .list-group-flush .list-group-item {
115 |   border-right: 0;
116 |   border-left: 0;
117 |   border-radius: 0;
118 | }
119 | 
120 | .list-group-flush:first-child .list-group-item:first-child {
121 |   border-top: 0;
122 | }
123 | 
124 | .flex-container {
125 |   display: flex;
126 |   align-items: center;
127 | }
128 | 
129 | .thumbnail {
130 |   width: 60px;
131 |   height: 60px;
132 |   border-radius: 30px;
133 |   margin-right: 16px;
134 | }
135 | 
136 | .list-group-item {
137 |   cursor: pointer;
138 | }
139 | 
140 | .list-group-item:hover {
141 |   background-color: #eee;
142 | }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | import { app, protocol, BrowserWindow, ipcMain } from 'electron'
  4 | import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib'
  5 | const isDevelopment = process.env.NODE_ENV !== 'production'
  6 | 
  7 | // Keep a global reference of the window object, if you don't, the window will
  8 | // be closed automatically when the JavaScript object is garbage collected.
  9 | let win
 10 | // 添加一个imageWindow
 11 | let imageWindow
 12 | let aboutWindow
 13 | 
 14 | // Scheme must be registered before the app is ready
 15 | protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 16 | 
 17 | function createWindow() {
 18 |   // Create the browser window.
 19 |   win = new BrowserWindow({
 20 |     width: 800,
 21 |     height: 600,
 22 |     webPreferences: {
 23 |       nodeIntegration: true
 24 |     }
 25 |   })
 26 |   imageWindow = new BrowserWindow({
 27 |     width: 400,
 28 |     height: 400,
 29 |     parent: win,
 30 |     show: false,
 31 |     webPreferences: {
 32 |       nodeIntegration: true
 33 |     }
 34 |   })
 35 |   aboutWindow = new BrowserWindow({
 36 |     width: 500,
 37 |     height: 500,
 38 |     parent: win,
 39 |     show: false,
 40 |     webPreferences: {
 41 |       nodeIntegration: true
 42 |     }
 43 |   })
 44 | 
 45 |   if (process.env.WEBPACK_DEV_SERVER_URL) {
 46 |     // Load the url of the dev server if in development mode
 47 |     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
 48 |     imageWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/#/image')
 49 |     aboutWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/#/about')
 50 |     if (!process.env.IS_TEST) win.webContents.openDevTools()
 51 |   } else {
 52 |     createProtocol('app')
 53 |     // Load the index.html when not in development
 54 |     win.loadURL('app://./index.html')
 55 |   }
 56 | 
 57 |   win.on('closed', () => {
 58 |     win = null
 59 |   })
 60 |   imageWindow.on('close', e => {
 61 |     e.preventDefault()
 62 |     imageWindow.hide()
 63 |   })
 64 |   aboutWindow.on('close', e => {
 65 |     e.preventDefault()
 66 |     aboutWindow.hide()
 67 |   })
 68 | }
 69 | 
 70 | // Quit when all windows are closed.
 71 | app.on('window-all-closed', () => {
 72 |   // On macOS it is common for applications and their menu bar
 73 |   // to stay active until the user quits explicitly with Cmd + Q
 74 |   if (process.platform !== 'darwin') {
 75 |     app.quit()
 76 |   }
 77 | })
 78 | 
 79 | app.on('activate', () => {
 80 |   // On macOS it's common to re-create a window in the app when the
 81 |   // dock icon is clicked and there are no other windows open.
 82 |   if (win === null) {
 83 |     createWindow()
 84 |   }
 85 | })
 86 | 
 87 | // This method will be called when Electron has finished
 88 | // initialization and is ready to create browser windows.
 89 | // Some APIs can only be used after this event occurs.
 90 | app.on('ready', async () => {
 91 |   if (isDevelopment && !process.env.IS_TEST) {
 92 |     // Install Vue Devtools
 93 |     try {
 94 |       await installVueDevtools()
 95 |     } catch (e) {
 96 |       console.error('Vue Devtools failed to install:', e.toString())
 97 |     }
 98 |   }
 99 |   createWindow()
100 | })
101 | 
102 | // Exit cleanly on request from parent process in development mode.
103 | if (isDevelopment) {
104 |   if (process.platform === 'win32') {
105 |     process.on('message', data => {
106 |       if (data === 'graceful-exit') {
107 |         app.quit()
108 |       }
109 |     })
110 |   } else {
111 |     process.on('SIGTERM', () => {
112 |       app.quit()
113 |     })
114 |   }
115 | }
116 | //ipcMain 模块有如下监听事件方法:
117 | // 监听 组件@/compontents/ImageList.vue methods:openImage下的ipcRenderer.send("toggle-image", image)
118 | // render 发送消息，main 接收消息
119 | //
120 | ipcMain.on('toggle-image', (event, arg) => {
121 |   imageWindow.show()
122 |   // 拿到消息后再发送给@/views/image.vue中的 ipcRenderer.on('image'...
123 |   imageWindow.webContents.send('image', arg)
124 | })
125 | 
126 | ipcMain.on('toggle-about', (event, arg) => {
127 |   aboutWindow.show()
128 | })
129 | 


--------------------------------------------------------------------------------