├── static └── .gitkeep ├── .gitattributes ├── .prettierrc ├── example └── example.py ├── pic ├── basedesktop_desc.png └── basedesktop_run_example.gif ├── src ├── renderer │ ├── assets │ │ └── logo.png │ ├── pages │ │ ├── Home │ │ │ └── Home.vue │ │ ├── Example │ │ │ └── Example.vue │ │ └── About │ │ │ └── About.vue │ ├── index.html │ ├── components │ │ ├── SideBar.vue │ │ └── TitleBar.vue │ ├── router │ │ └── index.js │ ├── App.vue │ └── main.js ├── index.ejs └── main │ ├── index.dev.js │ └── index.js ├── .gitignore ├── .eslintrc.js ├── .babelrc ├── LICENSE ├── .electron-vue ├── dev-client.js ├── webpack.main.config.js ├── build.js ├── webpack.web.config.js ├── dev-runner.js └── webpack.renderer.config.js ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "semi": false, 4 | "singleQuote": false 5 | } -------------------------------------------------------------------------------- /example/example.py: -------------------------------------------------------------------------------- 1 | import time 2 | 3 | 4 | time.sleep(2) 5 | print('hello world!') 6 | -------------------------------------------------------------------------------- /pic/basedesktop_desc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/friendmine/BaseDesktopApp/master/pic/basedesktop_desc.png -------------------------------------------------------------------------------- /src/renderer/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/friendmine/BaseDesktopApp/master/src/renderer/assets/logo.png -------------------------------------------------------------------------------- /pic/basedesktop_run_example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/friendmine/BaseDesktopApp/master/pic/basedesktop_run_example.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/electron/* 3 | dist/web/* 4 | build/* 5 | !build/icons 6 | node_modules/ 7 | npm-debug.log 8 | npm-debug.log.* 9 | thumbs.db 10 | !.gitkeep 11 | -------------------------------------------------------------------------------- /src/renderer/pages/Home/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/renderer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Base Desktop App 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | node: true 10 | }, 11 | globals: { 12 | __static: true 13 | }, 14 | plugins: [ 15 | 'html' 16 | ], 17 | 'rules': { 18 | // allow debugger during development 19 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/renderer/components/SideBar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "env": { 4 | "main": { 5 | "presets": [ 6 | ["env", { 7 | "targets": { "node": 7 } 8 | }], 9 | "stage-0" 10 | ] 11 | }, 12 | "renderer": { 13 | "presets": [ 14 | ["env", { 15 | "modules": false 16 | }], 17 | "stage-0" 18 | ] 19 | }, 20 | "web": { 21 | "presets": [ 22 | ["env", { 23 | "modules": false 24 | }], 25 | "stage-0" 26 | ] 27 | } 28 | }, 29 | "plugins": ["transform-runtime"] 30 | } 31 | -------------------------------------------------------------------------------- /src/renderer/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import Router from "vue-router" 3 | 4 | Vue.use(Router) 5 | 6 | const routeOptions = [ 7 | { path: "/", component: "Home" }, 8 | { path: "/home", component: "Home" }, 9 | { path: "/about", component: "About" }, 10 | { path: "/example", component: "Example" } 11 | ] 12 | 13 | const routes = routeOptions.map(route => { 14 | return { 15 | ...route, 16 | component: () => 17 | import(`../pages/${route.component}/${route.component}.vue`) 18 | } 19 | }) 20 | 21 | export default new Router({ 22 | routes: routes, 23 | mode: "hash" 24 | }) 25 | -------------------------------------------------------------------------------- /src/renderer/pages/Example/Example.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 32 | -------------------------------------------------------------------------------- /src/renderer/pages/About/About.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | 34 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Base Desktop :) 6 | <% if (htmlWebpackPlugin.options.nodeModules) { %> 7 | 8 | 11 | <% } %> 12 | 13 | 14 |
15 | 16 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/main/index.dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used specifically and only for development. It installs 3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to 4 | * modify this file, but it can be used to extend your development 5 | * environment. 6 | */ 7 | 8 | /* eslint-disable */ 9 | 10 | // Set environment for development 11 | process.env.NODE_ENV = "development" 12 | 13 | // Install `electron-debug` with `devtron` 14 | require("electron-debug")({ showDevTools: true }) 15 | 16 | // Install `vue-devtools` 17 | require("electron").app.on("ready", () => { 18 | let installExtension = require("electron-devtools-installer") 19 | installExtension 20 | .default(installExtension.VUEJS_DEVTOOLS) 21 | .then(() => {}) 22 | .catch(err => { 23 | console.log("Unable to install `vue-devtools`: \n", err) 24 | }) 25 | }) 26 | 27 | // Require `main` process to boot app 28 | require("./index") 29 | -------------------------------------------------------------------------------- /src/renderer/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | 32 | 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 William Feng 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. -------------------------------------------------------------------------------- /.electron-vue/dev-client.js: -------------------------------------------------------------------------------- 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 2 | 3 | hotClient.subscribe(event => { 4 | /** 5 | * Reload browser when HTMLWebpackPlugin emits a new index.html 6 | * 7 | * Currently disabled until jantimon/html-webpack-plugin#680 is resolved. 8 | * https://github.com/SimulatedGREG/electron-vue/issues/437 9 | * https://github.com/jantimon/html-webpack-plugin/issues/680 10 | */ 11 | // if (event.action === 'reload') { 12 | // window.location.reload() 13 | // } 14 | 15 | /** 16 | * Notify `mainWindow` when `main` process is compiling, 17 | * giving notice for an expected reload of the `electron` process 18 | */ 19 | if (event.action === 'compiling') { 20 | document.body.innerHTML += ` 21 | 34 | 35 |
36 | Compiling Main Process... 37 |
38 | ` 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /src/renderer/components/TitleBar.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 44 | 45 | 64 | -------------------------------------------------------------------------------- /src/renderer/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import ElementUI from "element-ui" 3 | import "element-ui/lib/theme-chalk/index.css" 4 | import App from "./App.vue" 5 | import router from "./router" 6 | const { exec } = require("child_process") 7 | 8 | Vue.use(ElementUI) 9 | 10 | Vue.prototype.$startLoading = function(loadStr) { 11 | var loadingObject = this.$loading({ 12 | lock: true, 13 | text: loadStr || "Loading ...", 14 | spinner: "el-icon-loading", 15 | background: "rgba(0, 0, 0, 0.7)" 16 | }) 17 | return loadingObject 18 | } 19 | 20 | Vue.prototype.$execCmd = function(cmdStr, loadingStr, resultName) { 21 | // final result 22 | let result 23 | // start loading animation 24 | loadingStr = loadingStr || "loading" 25 | let loadingObject = this.$startLoading(loadingStr) 26 | 27 | // start exec 28 | exec(cmdStr, (error, stdout, stderr) => { 29 | // error happened 30 | if (error) { 31 | console.log("get a error: " + error) 32 | result = error 33 | loadingObject.close() 34 | // feedback 35 | this[resultName] = result 36 | return 37 | } 38 | 39 | // no error 40 | console.log(stdout) 41 | console.log(stderr) 42 | result = stdout + "\n" + stderr 43 | // stop loading animation 44 | loadingObject.close() 45 | // feedback 46 | this[resultName] = result 47 | }) 48 | } 49 | 50 | /* eslint-disable no-new */ 51 | new Vue({ 52 | el: "#app", 53 | router, 54 | components: { 55 | App 56 | }, 57 | template: "" 58 | }) 59 | -------------------------------------------------------------------------------- /.electron-vue/webpack.main.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'main' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | 11 | let mainConfig = { 12 | entry: { 13 | main: path.join(__dirname, '../src/main/index.js') 14 | }, 15 | externals: [ 16 | ...Object.keys(dependencies || {}) 17 | ], 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(js)$/, 22 | enforce: 'pre', 23 | exclude: /node_modules/, 24 | use: { 25 | loader: 'eslint-loader', 26 | options: { 27 | formatter: require('eslint-friendly-formatter') 28 | } 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | use: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.node$/, 38 | use: 'node-loader' 39 | } 40 | ] 41 | }, 42 | node: { 43 | __dirname: process.env.NODE_ENV !== 'production', 44 | __filename: process.env.NODE_ENV !== 'production' 45 | }, 46 | output: { 47 | filename: '[name].js', 48 | libraryTarget: 'commonjs2', 49 | path: path.join(__dirname, '../dist/electron') 50 | }, 51 | plugins: [ 52 | new webpack.NoEmitOnErrorsPlugin() 53 | ], 54 | resolve: { 55 | extensions: ['.js', '.json', '.node'] 56 | }, 57 | target: 'electron-main' 58 | } 59 | 60 | /** 61 | * Adjust mainConfig for development settings 62 | */ 63 | if (process.env.NODE_ENV !== 'production') { 64 | mainConfig.plugins.push( 65 | new webpack.DefinePlugin({ 66 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 67 | }) 68 | ) 69 | } 70 | 71 | /** 72 | * Adjust mainConfig for production settings 73 | */ 74 | if (process.env.NODE_ENV === 'production') { 75 | mainConfig.plugins.push( 76 | new BabiliWebpackPlugin(), 77 | new webpack.DefinePlugin({ 78 | 'process.env.NODE_ENV': '"production"' 79 | }) 80 | ) 81 | } 82 | 83 | module.exports = mainConfig 84 | -------------------------------------------------------------------------------- /src/main/index.js: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow, ipcMain } from "electron" 2 | 3 | /** 4 | * Set `__static` path to static files in production 5 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html 6 | */ 7 | if (process.env.NODE_ENV !== "development") { 8 | global.__static = require("path") 9 | .join(__dirname, "/static") 10 | .replace(/\\/g, "\\\\") 11 | } 12 | 13 | let mainWindow 14 | const winURL = 15 | process.env.NODE_ENV === "development" 16 | ? `http://localhost:9080` 17 | : `file://${__dirname}/index.html` 18 | 19 | function createWindow() { 20 | /** 21 | * Initial window options 22 | */ 23 | mainWindow = new BrowserWindow({ 24 | height: 800, 25 | useContentSize: true, 26 | width: 1000, 27 | frame: false, 28 | webPreferences: { 29 | webSecurity: false 30 | } 31 | }) 32 | 33 | mainWindow.loadURL(winURL) 34 | 35 | mainWindow.on("closed", () => { 36 | mainWindow = null 37 | }) 38 | ipcMain.on("close", e => { 39 | mainWindow.close() 40 | mainWindow = null 41 | app.quit() 42 | }) 43 | ipcMain.on("hide-window", e => { 44 | mainWindow.minimize() 45 | }) 46 | ipcMain.on("max-window", e => { 47 | if (mainWindow.isMaximized()) { 48 | mainWindow.restore() 49 | } else { 50 | mainWindow.maximize() 51 | } 52 | }) 53 | } 54 | 55 | app.on("ready", createWindow) 56 | 57 | app.on("window-all-closed", () => { 58 | if (process.platform !== "darwin") { 59 | app.quit() 60 | } 61 | }) 62 | 63 | app.on("activate", () => { 64 | if (mainWindow === null) { 65 | createWindow() 66 | } 67 | }) 68 | 69 | /** 70 | * Auto Updater 71 | * 72 | * Uncomment the following code below and install `electron-updater` to 73 | * support auto updating. Code Signing with a valid certificate is required. 74 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating 75 | */ 76 | 77 | /* 78 | import { autoUpdater } from 'electron-updater' 79 | 80 | autoUpdater.on('update-downloaded', () => { 81 | autoUpdater.quitAndInstall() 82 | }) 83 | 84 | app.on('ready', () => { 85 | if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() 86 | }) 87 | */ 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Base Desktop App 2 | 3 | > electron + vue + element UI = excellent desktop app 4 | 5 | [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) 6 | 7 | 为你的工具快速构建一个界面 8 | 9 | ![](./pic/basedesktop_desc.png) 10 | 11 | ## 写在前面（2020.6.6） 12 | 13 | - 这个项目已经是两年前的东西了，两年可以改变的事情太多，何况是在日日新的前端。所以你会看到很多依赖可能会报deprecated的warning，但暂时不影响使用； 14 | - 需要注意，element ui目前的维护积极性已经不太高，vue也会逐渐往3切换； 15 | - 这套设计本质上反映了一个概念是，利用electron构建桌面，用terminal/cli来作为交互中介，与backend交互； 16 | - 这很明显会导致的问题就是它与系统的耦合依旧过高，你需要自行处理诸如路径之类的问题； 17 | - 如果你希望构建一个认真的app，我更推荐你参考 [传统的client/server概念](https://github.com/fyears/electron-python-example)，但很遗憾这个库也已经被弃用了； 18 | - 我不是专职的前端工程师，编写这个项目也只是做一个概念设计，我更希望你能从中得到一些概念上的启发，带着自己的思考去设计更好的程序； 19 | - 当然，这并不代表这个库不能用，如果你只是想构建小工具，那么它也是一个选择； 20 | - Have fun :) 21 | 22 | ## 目的 23 | 24 | - 在日常工作中，经常需要开发一些小工具用于简化流程以提升开发效率 25 | - 这些小工具通常都比较零碎，需要一个有效的手段将他们聚合在一起，这种手段通常是GUI 26 | - 而GUI的开发是很繁琐的，如果投入很多时间到开发GUI上难免本末倒置。而语言原生的GUI通常都非常丑 27 | - 这套模板针对这种情况被设计出来 28 | 29 | ## 选型 30 | 31 | - electron 将前端技术应用到桌面应用的开发中，利用前端技术开发桌面应用成为可能 32 | - vue 大大降低了前端入门门槛，让其他方向的工程师也能够快速上手 33 | - element UI 作为vue系列中知名的组件库，让工程师也能够独立开发出美观的界面 34 | - node 环境提供了与系统交互的能力，能够整合其他已有的工具 35 | 36 | ## 设计 37 | 38 | - 标题栏仿照MacOS制作，在全平台上表现一致 39 | - 美观的加载动画与通知弹窗，可以根据需要进行定制 40 | - 使用方法尽量简单，让开发者能够把更多的精力放在工具本身而不是GUI上 41 | 42 | ## 使用 43 | 44 | 建议是直接fork到自己的github使用，然后就可以随便玩了（？ 45 | 46 | ### 安装依赖 47 | 48 | ``` bash 49 | npm install 50 | ``` 51 | 52 | ### 运行 53 | 54 | 在环境配置完毕之后，执行： 55 | 56 | ``` 57 | npm run dev 58 | ``` 59 | 60 | 如果环境没有错误的话，应该可以看到app已经被正常拉起了。 61 | 62 | ### 如何关联现有的工具 63 | 64 | 首先我们需要新增一个页面： 65 | 66 | - 在pages中新增vue文件，例如新增一个example模块： 67 | - 创建example文件夹 68 | - 在里面创建Example.vue文件 69 | - 在components/SideBar.vue中仿照其他项目新增 70 | - `例子` 71 | - 在router/index.js中仿照其他项目新增 72 | - `{path: '/example', component: 'Example'},` 73 | 74 | 这样就可以看到在侧边栏中已经有新增的项目了。 75 | 76 | 假设我们需要加入的是一个 python 脚本（比如放置在根目录的 example文件夹 中），你只需要在 `Example.vue` 下新增方法： 77 | 78 | ```js 79 | this.$execCmd( 80 | // 命令行怎么运行它就怎么写 81 | `python ./example/example.py`, 82 | // 加载动效的文字 83 | "运行python example :)", 84 | // 结果存放，如果按默认设定，在执行完成后： 85 | // `this['cmdResult'] = result` 86 | 'cmdResult', 87 | ) 88 | ``` 89 | 90 | 然后点击运行： 91 | 92 | ![](./pic/basedesktop_run_example.gif) 93 | 94 | 就可以啦！ 95 | 96 | ## 依赖项目 97 | 98 | - [Electron](https://electronjs.org) 99 | - [Vue](https://cn.vuejs.org) 100 | - [ElementUI](http://element.eleme.io/#/zh-CN) 101 | 102 | ## BUG与建议 103 | 104 | 欢迎issue。（也欢迎star/fork 105 | -------------------------------------------------------------------------------- /.electron-vue/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | const { say } = require('cfonts') 6 | const chalk = require('chalk') 7 | const del = require('del') 8 | const { spawn } = require('child_process') 9 | const webpack = require('webpack') 10 | const Multispinner = require('multispinner') 11 | 12 | 13 | const mainConfig = require('./webpack.main.config') 14 | const rendererConfig = require('./webpack.renderer.config') 15 | const webConfig = require('./webpack.web.config') 16 | 17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' ' 18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' ' 19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' ' 20 | const isCI = process.env.CI || false 21 | 22 | if (process.env.BUILD_TARGET === 'clean') clean() 23 | else if (process.env.BUILD_TARGET === 'web') web() 24 | else build() 25 | 26 | function clean () { 27 | del.sync(['build/*', '!build/icons', '!build/icons/icon.*']) 28 | console.log(`\n${doneLog}\n`) 29 | process.exit() 30 | } 31 | 32 | function build () { 33 | greeting() 34 | 35 | del.sync(['dist/electron/*', '!.gitkeep']) 36 | 37 | const tasks = ['main', 'renderer'] 38 | const m = new Multispinner(tasks, { 39 | preText: 'building', 40 | postText: 'process' 41 | }) 42 | 43 | let results = '' 44 | 45 | m.on('success', () => { 46 | process.stdout.write('\x1B[2J\x1B[0f') 47 | console.log(`\n\n${results}`) 48 | console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`) 49 | process.exit() 50 | }) 51 | 52 | pack(mainConfig).then(result => { 53 | results += result + '\n\n' 54 | m.success('main') 55 | }).catch(err => { 56 | m.error('main') 57 | console.log(`\n ${errorLog}failed to build main process`) 58 | console.error(`\n${err}\n`) 59 | process.exit(1) 60 | }) 61 | 62 | pack(rendererConfig).then(result => { 63 | results += result + '\n\n' 64 | m.success('renderer') 65 | }).catch(err => { 66 | m.error('renderer') 67 | console.log(`\n ${errorLog}failed to build renderer process`) 68 | console.error(`\n${err}\n`) 69 | process.exit(1) 70 | }) 71 | } 72 | 73 | function pack (config) { 74 | return new Promise((resolve, reject) => { 75 | webpack(config, (err, stats) => { 76 | if (err) reject(err.stack || err) 77 | else if (stats.hasErrors()) { 78 | let err = '' 79 | 80 | stats.toString({ 81 | chunks: false, 82 | colors: true 83 | }) 84 | .split(/\r?\n/) 85 | .forEach(line => { 86 | err += ` ${line}\n` 87 | }) 88 | 89 | reject(err) 90 | } else { 91 | resolve(stats.toString({ 92 | chunks: false, 93 | colors: true 94 | })) 95 | } 96 | }) 97 | }) 98 | } 99 | 100 | function web () { 101 | del.sync(['dist/web/*', '!.gitkeep']) 102 | webpack(webConfig, (err, stats) => { 103 | if (err || stats.hasErrors()) console.log(err) 104 | 105 | console.log(stats.toString({ 106 | chunks: false, 107 | colors: true 108 | })) 109 | 110 | process.exit() 111 | }) 112 | } 113 | 114 | function greeting () { 115 | const cols = process.stdout.columns 116 | let text = '' 117 | 118 | if (cols > 85) text = 'lets-build' 119 | else if (cols > 60) text = 'lets-|build' 120 | else text = false 121 | 122 | if (text && !isCI) { 123 | say(text, { 124 | colors: ['yellow'], 125 | font: 'simple3d', 126 | space: false 127 | }) 128 | } else console.log(chalk.yellow.bold('\n lets-build')) 129 | console.log() 130 | } 131 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "base_desktop_app", 3 | "version": "0.0.1", 4 | "author": "williamfzc <178894043@qq.com>", 5 | "description": "electron + vue + element = cool desktop app", 6 | "license": "MIT", 7 | "main": "./dist/electron/main.js", 8 | "scripts": { 9 | "build": "node .electron-vue/build.js && electron-builder", 10 | "build:dir": "node .electron-vue/build.js && electron-builder --dir", 11 | "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", 12 | "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js", 13 | "dev": "node .electron-vue/dev-runner.js", 14 | "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src", 15 | "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src", 16 | "pack": "npm run pack:main && npm run pack:renderer", 17 | "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js", 18 | "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js", 19 | "postinstall": "npm run lint:fix" 20 | }, 21 | "build": { 22 | "productName": "BaseDesktopApp", 23 | "appId": "com.williamfzc.basedesktopapp", 24 | "directories": { 25 | "output": "build" 26 | }, 27 | "files": [ 28 | "dist/electron/**/*" 29 | ], 30 | "dmg": { 31 | "contents": [ 32 | { 33 | "x": 410, 34 | "y": 150, 35 | "type": "link", 36 | "path": "/Applications" 37 | }, 38 | { 39 | "x": 130, 40 | "y": 150, 41 | "type": "file" 42 | } 43 | ] 44 | }, 45 | "mac": { 46 | "icon": "build/icons/icon.icns" 47 | }, 48 | "win": { 49 | "icon": "build/icons/icon.ico" 50 | }, 51 | "linux": { 52 | "icon": "build/icons" 53 | } 54 | }, 55 | "dependencies": { 56 | "axios": "^0.19.0", 57 | "electron-store": "^2.0.0", 58 | "element-ui": "^2.3.4", 59 | "vue": "^2.3.3", 60 | "vue-electron": "^1.0.6", 61 | "vue-router": "^2.5.3", 62 | "vuex": "^2.3.1" 63 | }, 64 | "devDependencies": { 65 | "autoprefixer": "^6.6.0", 66 | "babel-core": "^6.25.0", 67 | "babel-eslint": "^7.2.3", 68 | "babel-loader": "^7.1.1", 69 | "babel-plugin-transform-runtime": "^6.23.0", 70 | "babel-preset-env": "^1.6.0", 71 | "babel-preset-stage-0": "^6.24.1", 72 | "babel-preset-vue-app": "^1.2.0", 73 | "babel-register": "^6.24.1", 74 | "babili-webpack-plugin": "^0.1.2", 75 | "cfonts": "^1.1.3", 76 | "chalk": "^2.1.0", 77 | "copy-webpack-plugin": "^4.0.1", 78 | "cross-env": "^5.0.5", 79 | "css-loader": "^0.28.4", 80 | "del": "^3.0.0", 81 | "devtron": "^1.4.0", 82 | "electron": "^1.7.5", 83 | "electron-builder": "^19.19.1", 84 | "electron-debug": "^1.4.0", 85 | "electron-devtools-installer": "^2.2.0", 86 | "eslint": "^4.4.1", 87 | "eslint-friendly-formatter": "^3.0.0", 88 | "eslint-loader": "^1.9.0", 89 | "eslint-plugin-html": "^3.1.1", 90 | "extract-text-webpack-plugin": "^3.0.0", 91 | "file-loader": "^0.11.2", 92 | "html-webpack-plugin": "^2.30.1", 93 | "multispinner": "^0.2.1", 94 | "node-loader": "^0.6.0", 95 | "postcss-loader": "^1.3.3", 96 | "rimraf": "^2.5.4", 97 | "style-loader": "^0.18.2", 98 | "url-loader": "^0.5.9", 99 | "vue-html-loader": "^1.2.4", 100 | "vue-loader": "^13.0.5", 101 | "vue-style-loader": "^3.0.1", 102 | "vue-template-compiler": "^2.4.2", 103 | "vue-wait": "^1.3.1", 104 | "webpack": "^3.5.2", 105 | "webpack-dev-server": "^2.7.1", 106 | "webpack-hot-middleware": "^2.18.2" 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /.electron-vue/webpack.web.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'web' 4 | 5 | const path = require('path') 6 | const webpack = require('webpack') 7 | 8 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 9 | const CopyWebpackPlugin = require('copy-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const HtmlWebpackPlugin = require('html-webpack-plugin') 12 | 13 | let webConfig = { 14 | devtool: '#cheap-module-eval-source-map', 15 | entry: { 16 | web: path.join(__dirname, '../src/renderer/main.js') 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(js|vue)$/, 22 | enforce: 'pre', 23 | exclude: /node_modules/, 24 | use: { 25 | loader: 'eslint-loader', 26 | options: { 27 | formatter: require('eslint-friendly-formatter') 28 | } 29 | } 30 | }, 31 | { 32 | test: /\.css$/, 33 | use: ExtractTextPlugin.extract({ 34 | fallback: 'style-loader', 35 | use: 'css-loader' 36 | }) 37 | }, 38 | { 39 | test: /\.html$/, 40 | use: 'vue-html-loader' 41 | }, 42 | { 43 | test: /\.js$/, 44 | use: 'babel-loader', 45 | include: [ path.resolve(__dirname, '../src/renderer') ], 46 | exclude: /node_modules/ 47 | }, 48 | { 49 | test: /\.vue$/, 50 | use: { 51 | loader: 'vue-loader', 52 | options: { 53 | extractCSS: true, 54 | loaders: { 55 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 56 | scss: 'vue-style-loader!css-loader!sass-loader' 57 | } 58 | } 59 | } 60 | }, 61 | { 62 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 63 | use: { 64 | loader: 'url-loader', 65 | query: { 66 | limit: 10000, 67 | name: 'imgs/[name].[ext]' 68 | } 69 | } 70 | }, 71 | { 72 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 73 | use: { 74 | loader: 'url-loader', 75 | query: { 76 | limit: 10000, 77 | name: 'fonts/[name].[ext]' 78 | } 79 | } 80 | } 81 | ] 82 | }, 83 | plugins: [ 84 | new ExtractTextPlugin('styles.css'), 85 | new HtmlWebpackPlugin({ 86 | filename: 'index.html', 87 | template: path.resolve(__dirname, '../src/index.ejs'), 88 | minify: { 89 | collapseWhitespace: true, 90 | removeAttributeQuotes: true, 91 | removeComments: true 92 | }, 93 | nodeModules: false 94 | }), 95 | new webpack.DefinePlugin({ 96 | 'process.env.IS_WEB': 'true' 97 | }), 98 | new webpack.HotModuleReplacementPlugin(), 99 | new webpack.NoEmitOnErrorsPlugin() 100 | ], 101 | output: { 102 | filename: '[name].js', 103 | path: path.join(__dirname, '../dist/web') 104 | }, 105 | resolve: { 106 | alias: { 107 | '@': path.join(__dirname, '../src/renderer'), 108 | 'vue$': 'vue/dist/vue.esm.js' 109 | }, 110 | extensions: ['.js', '.vue', '.json', '.css'] 111 | }, 112 | target: 'web' 113 | } 114 | 115 | /** 116 | * Adjust webConfig for production settings 117 | */ 118 | if (process.env.NODE_ENV === 'production') { 119 | webConfig.devtool = '' 120 | 121 | webConfig.plugins.push( 122 | new BabiliWebpackPlugin(), 123 | new CopyWebpackPlugin([ 124 | { 125 | from: path.join(__dirname, '../static'), 126 | to: path.join(__dirname, '../dist/web/static'), 127 | ignore: ['.*'] 128 | } 129 | ]), 130 | new webpack.DefinePlugin({ 131 | 'process.env.NODE_ENV': '"production"' 132 | }), 133 | new webpack.LoaderOptionsPlugin({ 134 | minimize: true 135 | }) 136 | ) 137 | } 138 | 139 | module.exports = webConfig 140 | -------------------------------------------------------------------------------- /.electron-vue/dev-runner.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const chalk = require('chalk') 4 | const electron = require('electron') 5 | const path = require('path') 6 | const { say } = require('cfonts') 7 | const { spawn } = require('child_process') 8 | const webpack = require('webpack') 9 | const WebpackDevServer = require('webpack-dev-server') 10 | const webpackHotMiddleware = require('webpack-hot-middleware') 11 | 12 | const mainConfig = require('./webpack.main.config') 13 | const rendererConfig = require('./webpack.renderer.config') 14 | 15 | let electronProcess = null 16 | let manualRestart = false 17 | let hotMiddleware 18 | 19 | function logStats (proc, data) { 20 | let log = '' 21 | 22 | log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`) 23 | log += '\n\n' 24 | 25 | if (typeof data === 'object') { 26 | data.toString({ 27 | colors: true, 28 | chunks: false 29 | }).split(/\r?\n/).forEach(line => { 30 | log += ' ' + line + '\n' 31 | }) 32 | } else { 33 | log += ` ${data}\n` 34 | } 35 | 36 | log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n' 37 | 38 | console.log(log) 39 | } 40 | 41 | function startRenderer () { 42 | return new Promise((resolve, reject) => { 43 | rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer) 44 | 45 | const compiler = webpack(rendererConfig) 46 | hotMiddleware = webpackHotMiddleware(compiler, { 47 | log: false, 48 | heartbeat: 2500 49 | }) 50 | 51 | compiler.plugin('compilation', compilation => { 52 | compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => { 53 | hotMiddleware.publish({ action: 'reload' }) 54 | cb() 55 | }) 56 | }) 57 | 58 | compiler.plugin('done', stats => { 59 | logStats('Renderer', stats) 60 | }) 61 | 62 | const server = new WebpackDevServer( 63 | compiler, 64 | { 65 | contentBase: path.join(__dirname, '../'), 66 | quiet: true, 67 | before (app, ctx) { 68 | app.use(hotMiddleware) 69 | ctx.middleware.waitUntilValid(() => { 70 | resolve() 71 | }) 72 | } 73 | } 74 | ) 75 | 76 | server.listen(9080) 77 | }) 78 | } 79 | 80 | function startMain () { 81 | return new Promise((resolve, reject) => { 82 | mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main) 83 | 84 | const compiler = webpack(mainConfig) 85 | 86 | compiler.plugin('watch-run', (compilation, done) => { 87 | logStats('Main', chalk.white.bold('compiling...')) 88 | hotMiddleware.publish({ action: 'compiling' }) 89 | done() 90 | }) 91 | 92 | compiler.watch({}, (err, stats) => { 93 | if (err) { 94 | console.log(err) 95 | return 96 | } 97 | 98 | logStats('Main', stats) 99 | 100 | if (electronProcess && electronProcess.kill) { 101 | manualRestart = true 102 | process.kill(electronProcess.pid) 103 | electronProcess = null 104 | startElectron() 105 | 106 | setTimeout(() => { 107 | manualRestart = false 108 | }, 5000) 109 | } 110 | 111 | resolve() 112 | }) 113 | }) 114 | } 115 | 116 | function startElectron () { 117 | electronProcess = spawn(electron, ['--inspect=5858', '.']) 118 | 119 | electronProcess.stdout.on('data', data => { 120 | electronLog(data, 'blue') 121 | }) 122 | electronProcess.stderr.on('data', data => { 123 | electronLog(data, 'red') 124 | }) 125 | 126 | electronProcess.on('close', () => { 127 | if (!manualRestart) process.exit() 128 | }) 129 | } 130 | 131 | function electronLog (data, color) { 132 | let log = '' 133 | data = data.toString().split(/\r?\n/) 134 | data.forEach(line => { 135 | log += ` ${line}\n` 136 | }) 137 | if (/[0-9A-z]+/.test(log)) { 138 | console.log( 139 | chalk[color].bold('┏ Electron -------------------') + 140 | '\n\n' + 141 | log + 142 | chalk[color].bold('┗ ----------------------------') + 143 | '\n' 144 | ) 145 | } 146 | } 147 | 148 | function greeting () { 149 | const cols = process.stdout.columns 150 | let text = '' 151 | 152 | if (cols > 104) text = 'electron-vue' 153 | else if (cols > 76) text = 'electron-|vue' 154 | else text = false 155 | 156 | if (text) { 157 | say(text, { 158 | colors: ['yellow'], 159 | font: 'simple3d', 160 | space: false 161 | }) 162 | } else console.log(chalk.yellow.bold('\n electron-vue')) 163 | console.log(chalk.blue(' getting ready...') + '\n') 164 | } 165 | 166 | function init () { 167 | greeting() 168 | 169 | Promise.all([startRenderer(), startMain()]) 170 | .then(() => { 171 | startElectron() 172 | }) 173 | .catch(err => { 174 | console.error(err) 175 | }) 176 | } 177 | 178 | init() 179 | -------------------------------------------------------------------------------- /.electron-vue/webpack.renderer.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'renderer' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | const CopyWebpackPlugin = require('copy-webpack-plugin') 11 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 12 | const HtmlWebpackPlugin = require('html-webpack-plugin') 13 | 14 | /** 15 | * List of node_modules to include in webpack bundle 16 | * 17 | * Required for specific packages like Vue UI libraries 18 | * that provide pure *.vue files that need compiling 19 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals 20 | */ 21 | let whiteListedModules = ['vue'] 22 | 23 | let rendererConfig = { 24 | devtool: '#cheap-module-eval-source-map', 25 | entry: { 26 | renderer: path.join(__dirname, '../src/renderer/main.js') 27 | }, 28 | externals: [ 29 | ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)) 30 | ], 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.(js|vue)$/, 35 | enforce: 'pre', 36 | exclude: /node_modules/, 37 | use: { 38 | loader: 'eslint-loader', 39 | options: { 40 | formatter: require('eslint-friendly-formatter') 41 | } 42 | } 43 | }, 44 | { 45 | test: /\.css$/, 46 | use: ExtractTextPlugin.extract({ 47 | fallback: 'style-loader', 48 | use: 'css-loader' 49 | }) 50 | }, 51 | { 52 | test: /\.html$/, 53 | use: 'vue-html-loader' 54 | }, 55 | { 56 | test: /\.js$/, 57 | use: 'babel-loader', 58 | exclude: /node_modules/ 59 | }, 60 | { 61 | test: /\.node$/, 62 | use: 'node-loader' 63 | }, 64 | { 65 | test: /\.vue$/, 66 | use: { 67 | loader: 'vue-loader', 68 | options: { 69 | extractCSS: process.env.NODE_ENV === 'production', 70 | loaders: { 71 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 72 | scss: 'vue-style-loader!css-loader!sass-loader' 73 | } 74 | } 75 | } 76 | }, 77 | { 78 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 79 | use: { 80 | loader: 'url-loader', 81 | query: { 82 | limit: 10000, 83 | name: 'imgs/[name]--[folder].[ext]' 84 | } 85 | } 86 | }, 87 | { 88 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 89 | loader: 'url-loader', 90 | options: { 91 | limit: 10000, 92 | name: 'media/[name]--[folder].[ext]' 93 | } 94 | }, 95 | { 96 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 97 | use: { 98 | loader: 'url-loader', 99 | query: { 100 | limit: 10000, 101 | name: 'fonts/[name]--[folder].[ext]' 102 | } 103 | } 104 | } 105 | ] 106 | }, 107 | node: { 108 | __dirname: process.env.NODE_ENV !== 'production', 109 | __filename: process.env.NODE_ENV !== 'production' 110 | }, 111 | plugins: [ 112 | new ExtractTextPlugin('styles.css'), 113 | new HtmlWebpackPlugin({ 114 | filename: 'index.html', 115 | template: path.resolve(__dirname, '../src/index.ejs'), 116 | minify: { 117 | collapseWhitespace: true, 118 | removeAttributeQuotes: true, 119 | removeComments: true 120 | }, 121 | nodeModules: process.env.NODE_ENV !== 'production' 122 | ? path.resolve(__dirname, '../node_modules') 123 | : false 124 | }), 125 | new webpack.HotModuleReplacementPlugin(), 126 | new webpack.NoEmitOnErrorsPlugin() 127 | ], 128 | output: { 129 | filename: '[name].js', 130 | libraryTarget: 'commonjs2', 131 | path: path.join(__dirname, '../dist/electron') 132 | }, 133 | resolve: { 134 | alias: { 135 | '@': path.join(__dirname, '../src/renderer'), 136 | 'vue$': 'vue/dist/vue.esm.js' 137 | }, 138 | extensions: ['.js', '.vue', '.json', '.css', '.node'] 139 | }, 140 | target: 'electron-renderer' 141 | } 142 | 143 | /** 144 | * Adjust rendererConfig for development settings 145 | */ 146 | if (process.env.NODE_ENV !== 'production') { 147 | rendererConfig.plugins.push( 148 | new webpack.DefinePlugin({ 149 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 150 | }) 151 | ) 152 | } 153 | 154 | /** 155 | * Adjust rendererConfig for production settings 156 | */ 157 | if (process.env.NODE_ENV === 'production') { 158 | rendererConfig.devtool = '' 159 | 160 | rendererConfig.plugins.push( 161 | new BabiliWebpackPlugin(), 162 | new CopyWebpackPlugin([ 163 | { 164 | from: path.join(__dirname, '../static'), 165 | to: path.join(__dirname, '../dist/electron/static'), 166 | ignore: ['.*'] 167 | } 168 | ]), 169 | new webpack.DefinePlugin({ 170 | 'process.env.NODE_ENV': '"production"' 171 | }), 172 | new webpack.LoaderOptionsPlugin({ 173 | minimize: true 174 | }) 175 | ) 176 | } 177 | 178 | module.exports = rendererConfig 179 | --------------------------------------------------------------------------------