├── .electron-vue
    ├── build.js
    ├── dev-client.js
    ├── dev-runner.js
    ├── webpack.main.config.js
    ├── webpack.renderer.config.js
    └── webpack.web.config.js
├── .gitignore
├── .travis.yml
├── README.md
├── appveyor.yml
├── package-lock.json
├── package.json
├── src
    ├── index.ejs
    ├── main
    │   ├── index.dev.js
    │   └── index.js
    └── renderer
    │   ├── App.vue
    │   ├── assets
    │       ├── .gitkeep
    │       ├── bg.jpg
    │       ├── l-arrow.png
    │       ├── logo.png
    │       ├── r-arrow.png
    │       └── x.png
    │   ├── components
    │       ├── LandingPage.vue
    │       └── LandingPage
    │       │   └── SystemInformation.vue
    │   ├── db.js
    │   ├── main.js
    │   ├── page
    │       └── home
    │       │   ├── home.less
    │       │   └── home.vue
    │   ├── router
    │       └── index.js
    │   └── store
    │       ├── index.js
    │       └── modules
    │           ├── Counter.js
    │           └── index.js
├── static
    └── .gitkeep
└── test
    ├── .eslintrc
    └── e2e
        ├── index.js
        ├── specs
            └── Launch.spec.js
        └── utils.js


/.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 | 


--------------------------------------------------------------------------------
/.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 |   if (event.action === 'reload') {
 8 |     window.location.reload()
 9 |   }
10 | 
11 |   /**
12 |    * Notify `mainWindow` when `main` process is compiling,
13 |    * giving notice for an expected reload of the `electron` process
14 |    */
15 |   if (event.action === 'compiling') {
16 |     document.body.innerHTML += `
17 |       <style>
18 |         #dev-client {
19 |           background: #4fc08d;
20 |           border-radius: 4px;
21 |           bottom: 20px;
22 |           box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
23 |           color: #fff;
24 |           font-family: 'Source Sans Pro', sans-serif;
25 |           left: 20px;
26 |           padding: 8px 12px;
27 |           position: absolute;
28 |         }
29 |       </style>
30 | 
31 |       <div id="dev-client">
32 |         Compiling Main Process...
33 |       </div>
34 |     `
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/.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 |         setup (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', path.join(__dirname, '../dist/electron/main.js')])
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.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 |         use: 'babel-loader',
23 |         exclude: /node_modules/
24 |       },
25 |       {
26 |         test: /\.node$/,
27 |         use: 'node-loader'
28 |       }
29 |     ]
30 |   },
31 |   node: {
32 |     __dirname: process.env.NODE_ENV !== 'production',
33 |     __filename: process.env.NODE_ENV !== 'production'
34 |   },
35 |   output: {
36 |     filename: '[name].js',
37 |     libraryTarget: 'commonjs2',
38 |     path: path.join(__dirname, '../dist/electron')
39 |   },
40 |   plugins: [
41 |     new webpack.NoEmitOnErrorsPlugin()
42 |   ],
43 |   resolve: {
44 |     extensions: ['.js', '.json', '.node']
45 |   },
46 |   target: 'electron-main'
47 | }
48 | 
49 | /**
50 |  * Adjust mainConfig for development settings
51 |  */
52 | if (process.env.NODE_ENV !== 'production') {
53 |   mainConfig.plugins.push(
54 |     new webpack.DefinePlugin({
55 |       '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
56 |     })
57 |   )
58 | }
59 | 
60 | /**
61 |  * Adjust mainConfig for production settings
62 |  */
63 | if (process.env.NODE_ENV === 'production') {
64 |   mainConfig.plugins.push(
65 |     new BabiliWebpackPlugin(),
66 |     new webpack.DefinePlugin({
67 |       'process.env.NODE_ENV': '"production"'
68 |     })
69 |   )
70 | }
71 | 
72 | module.exports = mainConfig
73 | 


--------------------------------------------------------------------------------
/.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: /\.css$/,
 35 |                 use: ExtractTextPlugin.extract({
 36 |                     fallback: 'style-loader',
 37 |                     use: 'css-loader'
 38 |                 })
 39 |             },
 40 |             {
 41 |                 test: /\.less$/,
 42 |                 use: [{
 43 |                     loader: "style-loader" // creates style nodes from JS strings
 44 |                 }, {
 45 |                     loader: "css-loader" // translates CSS into CommonJS
 46 |                 }, {
 47 |                     loader: "less-loader" // compiles Less to CSS
 48 |                 }]
 49 |             },
 50 |             {
 51 |                 test: /\.html$/,
 52 |                 use: 'vue-html-loader'
 53 |             },
 54 |             {
 55 |                 test: /\.js$/,
 56 |                 use: 'babel-loader',
 57 |                 exclude: /node_modules/
 58 |             },
 59 |             {
 60 |                 test: /\.node$/,
 61 |                 use: 'node-loader'
 62 |             },
 63 |             {
 64 |                 test: /\.vue$/,
 65 |                 use: {
 66 |                     loader: 'vue-loader',
 67 |                     options: {
 68 |                         extractCSS: process.env.NODE_ENV === 'production',
 69 |                         loaders: {
 70 |                             sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 71 |                             scss: 'vue-style-loader!css-loader!sass-loader'
 72 |                         }
 73 |                     }
 74 |                 }
 75 |             },
 76 |             {
 77 |                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 78 |                 use: {
 79 |                     loader: 'url-loader',
 80 |                     query: {
 81 |                         limit: 10000,
 82 |                         name: 'imgs/[name]--[folder].[ext]'
 83 |                     }
 84 |                 }
 85 |             },
 86 |             {
 87 |                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 88 |                 loader: 'url-loader',
 89 |                 options: {
 90 |                     limit: 10000,
 91 |                     name: 'media/[name]--[folder].[ext]'
 92 |                 }
 93 |             },
 94 |             {
 95 |                 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 96 |                 use: {
 97 |                     loader: 'url-loader',
 98 |                     query: {
 99 |                         limit: 10000,
100 |                         name: 'fonts/[name]--[folder].[ext]'
101 |                     }
102 |                 }
103 |             }
104 |         ]
105 |     },
106 |     node: {
107 |         __dirname: process.env.NODE_ENV !== 'production',
108 |         __filename: process.env.NODE_ENV !== 'production'
109 |     },
110 |     plugins: [
111 |         new ExtractTextPlugin('styles.css'),
112 |         new HtmlWebpackPlugin({
113 |             filename: 'index.html',
114 |             template: path.resolve(__dirname, '../src/index.ejs'),
115 |             minify: {
116 |                 collapseWhitespace: true,
117 |                 removeAttributeQuotes: true,
118 |                 removeComments: true
119 |             },
120 |             nodeModules: process.env.NODE_ENV !== 'production'
121 |                 ? path.resolve(__dirname, '../node_modules')
122 |                 : false
123 |         }),
124 |         new webpack.HotModuleReplacementPlugin(),
125 |         new webpack.NoEmitOnErrorsPlugin()
126 |     ],
127 |     output: {
128 |         filename: '[name].js',
129 |         libraryTarget: 'commonjs2',
130 |         path: path.join(__dirname, '../dist/electron')
131 |     },
132 |     resolve: {
133 |         alias: {
134 |             '@': path.join(__dirname, '../src/renderer'),
135 |             'vue$': 'vue/dist/vue.esm.js'
136 |         },
137 |         extensions: ['.js', '.vue', '.json', '.css', '.node']
138 |     },
139 |     target: 'electron-renderer'
140 | }
141 | 
142 | /**
143 |  * Adjust rendererConfig for development settings
144 |  */
145 | if (process.env.NODE_ENV !== 'production') {
146 |     rendererConfig.plugins.push(
147 |         new webpack.DefinePlugin({
148 |             '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
149 |         })
150 |     )
151 | }
152 | 
153 | /**
154 |  * Adjust rendererConfig for production settings
155 |  */
156 | if (process.env.NODE_ENV === 'production') {
157 |     rendererConfig.devtool = ''
158 |     
159 |     rendererConfig.plugins.push(
160 |         new BabiliWebpackPlugin(),
161 |         new CopyWebpackPlugin([
162 |             {
163 |                 from: path.join(__dirname, '../static'),
164 |                 to: path.join(__dirname, '../dist/electron/static'),
165 |                 ignore: ['.*']
166 |             }
167 |         ]),
168 |         new webpack.DefinePlugin({
169 |             'process.env.NODE_ENV': '"production"'
170 |         }),
171 |         new webpack.LoaderOptionsPlugin({
172 |             minimize: true
173 |         })
174 |     )
175 | }
176 | 
177 | module.exports = rendererConfig
178 | 


--------------------------------------------------------------------------------
/.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: /\.css$/,
 22 |         use: ExtractTextPlugin.extract({
 23 |           fallback: 'style-loader',
 24 |           use: 'css-loader'
 25 |         })
 26 |       },
 27 |       {
 28 |         test: /\.html$/,
 29 |         use: 'vue-html-loader'
 30 |       },
 31 |       {
 32 |         test: /\.js$/,
 33 |         use: 'babel-loader',
 34 |         include: [ path.resolve(__dirname, '../src/renderer') ],
 35 |         exclude: /node_modules/
 36 |       },
 37 |       {
 38 |         test: /\.vue$/,
 39 |         use: {
 40 |           loader: 'vue-loader',
 41 |           options: {
 42 |             extractCSS: true,
 43 |             loaders: {
 44 |               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
 45 |               scss: 'vue-style-loader!css-loader!sass-loader'
 46 |             }
 47 |           }
 48 |         }
 49 |       },
 50 |       {
 51 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 52 |         use: {
 53 |           loader: 'url-loader',
 54 |           query: {
 55 |             limit: 10000,
 56 |             name: 'imgs/[name].[ext]'
 57 |           }
 58 |         }
 59 |       },
 60 |       {
 61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 62 |         use: {
 63 |           loader: 'url-loader',
 64 |           query: {
 65 |             limit: 10000,
 66 |             name: 'fonts/[name].[ext]'
 67 |           }
 68 |         }
 69 |       }
 70 |     ]
 71 |   },
 72 |   plugins: [
 73 |     new ExtractTextPlugin('styles.css'),
 74 |     new HtmlWebpackPlugin({
 75 |       filename: 'index.html',
 76 |       template: path.resolve(__dirname, '../src/index.ejs'),
 77 |       minify: {
 78 |         collapseWhitespace: true,
 79 |         removeAttributeQuotes: true,
 80 |         removeComments: true
 81 |       },
 82 |       nodeModules: false
 83 |     }),
 84 |     new webpack.DefinePlugin({
 85 |       'process.env.IS_WEB': 'true'
 86 |     }),
 87 |     new webpack.HotModuleReplacementPlugin(),
 88 |     new webpack.NoEmitOnErrorsPlugin()
 89 |   ],
 90 |   output: {
 91 |     filename: '[name].js',
 92 |     path: path.join(__dirname, '../dist/web')
 93 |   },
 94 |   resolve: {
 95 |     alias: {
 96 |       '@': path.join(__dirname, '../src/renderer'),
 97 |       'vue$': 'vue/dist/vue.esm.js'
 98 |     },
 99 |     extensions: ['.js', '.vue', '.json', '.css']
100 |   },
101 |   target: 'web'
102 | }
103 | 
104 | /**
105 |  * Adjust webConfig for production settings
106 |  */
107 | if (process.env.NODE_ENV === 'production') {
108 |   webConfig.devtool = ''
109 | 
110 |   webConfig.plugins.push(
111 |     new BabiliWebpackPlugin(),
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.join(__dirname, '../static'),
115 |         to: path.join(__dirname, '../dist/web/static'),
116 |         ignore: ['.*']
117 |       }
118 |     ]),
119 |     new webpack.DefinePlugin({
120 |       'process.env.NODE_ENV': '"production"'
121 |     }),
122 |     new webpack.LoaderOptionsPlugin({
123 |       minimize: true
124 |     })
125 |   )
126 | }
127 | 
128 | module.exports = webConfig
129 | 


--------------------------------------------------------------------------------
/.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 | .babelrc
12 | .idea/
13 | build/
14 | dist/


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | # Commented sections below can be used to run tests on the CI server
 2 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing
 3 | osx_image: xcode8.3
 4 | sudo: required
 5 | dist: trusty
 6 | language: c
 7 | matrix:
 8 |   include:
 9 |   - os: osx
10 |   - os: linux
11 |     env: CC=clang CXX=clang++ npm_config_clang=1
12 |     compiler: clang
13 | cache:
14 |   directories:
15 |   - node_modules
16 |   - "$HOME/.electron"
17 |   - "$HOME/.cache"
18 | addons:
19 |   apt:
20 |     packages:
21 |     - libgnome-keyring-dev
22 |     - icnsutils
23 |     #- xvfb
24 | before_install:
25 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
26 |   "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
27 |   | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
28 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
29 | install:
30 | #- export DISPLAY=':99.0'
31 | #- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
32 | - nvm install 7
33 | - curl -o- -L https://yarnpkg.com/install.sh | bash
34 | - source ~/.bashrc
35 | - npm install -g xvfb-maybe
36 | - yarn
37 | script:
38 | #- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e
39 | - yarn run build
40 | branches:
41 |   only:
42 |   - master
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # my-project
 2 | 
 3 | > An electron-vue project
 4 | 
 5 | #### Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:9080
12 | npm run dev
13 | 
14 | # build electron application for production
15 | npm run build
16 | 
17 | # run end-to-end tests
18 | npm test
19 | 
20 | 
21 | ```
22 | 
23 | #### 简介
24 | 本项目是学习electron的一个demo。基于electron-vue脚手架开发的简单的相册程序。具体可访问我的blog。
25 | 传送门：[博客地址](http://pingshao.wang:8080/)
26 | 
27 | ---
28 | 
29 | This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about the original structure can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
30 | 


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | # Commented sections below can be used to run tests on the CI server
 2 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing
 3 | version: 0.1.{build}
 4 | 
 5 | branches:
 6 |   only:
 7 |     - master
 8 | 
 9 | image: Visual Studio 2017
10 | platform:
11 |   - x64
12 | 
13 | cache:
14 |   - node_modules
15 |   - '%APPDATA%\npm-cache'
16 |   - '%USERPROFILE%\.electron'
17 |   - '%USERPROFILE%\AppData\Local\Yarn\cache'
18 | 
19 | init:
20 |   - git config --global core.autocrlf input
21 | 
22 | install:
23 |   - ps: Install-Product node 8 x64
24 |   - choco install yarn --ignore-dependencies
25 |   - git reset --hard HEAD
26 |   - yarn
27 |   - node --version
28 | 
29 | build_script:
30 |   #- yarn test
31 |   - yarn build
32 | 
33 | test: off
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "my-project",
  3 |   "version": "1.0.0",
  4 |   "author": "徐绍平 <455255849@qq.com>",
  5 |   "description": "An electron-vue project",
  6 |   "license": null,
  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 |     "e2e": "npm run pack && mocha test/e2e",
 15 |     "pack": "npm run pack:main && npm run pack:renderer",
 16 |     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
 17 |     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
 18 |     "test": "npm run e2e",
 19 |     "postinstall": ""
 20 |   },
 21 |   "build": {
 22 |     "productName": "my-project",
 23 |     "appId": "xu_shao_ping",
 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.16.1",
 57 |     "image-size": "^0.6.1",
 58 |     "nedb": "^1.8.0",
 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 |     "babel-core": "^6.25.0",
 66 |     "babel-loader": "^7.1.1",
 67 |     "babel-plugin-istanbul": "^4.1.1",
 68 |     "babel-plugin-transform-runtime": "^6.23.0",
 69 |     "babel-preset-env": "^1.6.0",
 70 |     "babel-preset-stage-0": "^6.24.1",
 71 |     "babel-register": "^6.24.1",
 72 |     "babili-webpack-plugin": "^0.1.2",
 73 |     "cfonts": "^1.1.3",
 74 |     "chai": "^4.0.0",
 75 |     "chalk": "^2.1.0",
 76 |     "copy-webpack-plugin": "^4.0.1",
 77 |     "cross-env": "^5.0.5",
 78 |     "css-loader": "^0.28.4",
 79 |     "del": "^3.0.0",
 80 |     "devtron": "^1.4.0",
 81 |     "electron": "^1.7.6",
 82 |     "electron-builder": "^19.19.1",
 83 |     "electron-debug": "^1.4.0",
 84 |     "electron-devtools-installer": "^2.2.0",
 85 |     "extract-text-webpack-plugin": "^3.0.0",
 86 |     "file-loader": "^0.11.2",
 87 |     "html-webpack-plugin": "^2.30.1",
 88 |     "less": "^2.7.2",
 89 |     "less-loader": "^4.0.5",
 90 |     "mocha": "^3.0.2",
 91 |     "multispinner": "^0.2.1",
 92 |     "node-loader": "^0.6.0",
 93 |     "require-dir": "^0.3.0",
 94 |     "spectron": "^3.7.1",
 95 |     "style-loader": "^0.18.2",
 96 |     "url-loader": "^0.5.9",
 97 |     "vue-html-loader": "^1.2.4",
 98 |     "vue-loader": "^12.2.2",
 99 |     "vue-style-loader": "^3.0.1",
100 |     "vue-template-compiler": "^2.4.2",
101 |     "webpack": "^3.5.2",
102 |     "webpack-dev-server": "^2.7.1",
103 |     "webpack-hot-middleware": "^2.18.2"
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>my-project</title>
 6 |     <% if (htmlWebpackPlugin.options.nodeModules) { %>
 7 |       <!-- Add `node_modules/` to global paths so `require` works properly in development -->
 8 |       <script>
 9 |         require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
10 |       </script>
11 |     <% } %>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <!-- Set `__static` path to static files in production -->
16 |     <script>
17 |       if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
18 |     </script>
19 | 
20 |     <!-- webpack builds are automatically injected -->
21 |   </body>
22 | </html>
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.default(installExtension.VUEJS_DEVTOOLS)
20 |     .then(() => {})
21 |     .catch(err => {
22 |       console.log('Unable to install `vue-devtools`: \n', err)
23 |     })
24 | })
25 | 
26 | // Require `main` process to boot app
27 | require('./index')
28 | 


--------------------------------------------------------------------------------
/src/main/index.js:
--------------------------------------------------------------------------------
 1 | import { app, BrowserWindow } from 'electron'
 2 | const ipc = require('electron').ipcMain
 3 | const dialog = require('electron').dialog
 4 | 
 5 | /**
 6 |  * Set `__static` path to static files in production
 7 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 8 |  */
 9 | if (process.env.NODE_ENV !== 'development') {
10 |   global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
11 | }
12 | 
13 | let mainWindow
14 | const winURL = process.env.NODE_ENV === 'development'
15 |   ? `http://localhost:9080`
16 |   : `file://${__dirname}/index.html`
17 | 
18 | function createWindow () {
19 |   /**
20 |    * Initial window options
21 |    */
22 |   mainWindow = new BrowserWindow({
23 |    // height: 600,
24 |     useContentSize: true,
25 |   //  width: 1000
26 |   })
27 | 
28 |   mainWindow.loadURL(winURL)
29 | 
30 |   mainWindow.on('closed', () => {
31 |     mainWindow = null
32 |   })
33 | }
34 | 
35 | app.on('ready', createWindow)
36 | 
37 | app.on('window-all-closed', () => {
38 |   if (process.platform !== 'darwin') {
39 |     app.quit()
40 |   }
41 | })
42 | 
43 | app.on('activate', () => {
44 |   if (mainWindow === null) {
45 |     createWindow()
46 |   }
47 | })
48 | 
49 | ipc.on('open-file-dialog', function (event) {
50 |     dialog.showOpenDialog({
51 |         properties: ['openFile', 'openDirectory']
52 |     }, function (files) {
53 |         if (files) event.sender.send('selected-directory', files)
54 |     })
55 | })
56 | 
57 | ipc.on('first', function (e) {
58 |     dialog.showErrorBox('错误提示', '已经是第一张图片了')
59 |     //dialog.showErrorBox('已经是第一张图片了')
60 | })
61 | ipc.on('last', function (e) {
62 |     dialog.showErrorBox('错误提示', '已经是最后一张图片了')
63 | })
64 | ipc.on('minWindow', function (e) {
65 |    
66 |     mainWindow.unmaximize()
67 | })
68 | ipc.on('maxWindow', function (e) {
69 |     mainWindow.maximize()
70 | })
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | /**
79 |  * Auto Updater
80 |  *
81 |  * Uncomment the following code below and install `electron-updater` to
82 |  * support auto updating. Code Signing with a valid certificate is required.
83 |  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
84 |  */
85 | 
86 | /*
87 | import { autoUpdater } from 'electron-updater'
88 | 
89 | autoUpdater.on('update-downloaded', () => {
90 |   autoUpdater.quitAndInstall()
91 | })
92 | 
93 | app.on('ready', () => {
94 |   if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
95 | })
96 |  */
97 | 


--------------------------------------------------------------------------------
/src/renderer/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'my-project'
10 |   }
11 | </script>
12 | 
13 | <style>
14 |     #app {
15 |         font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
16 |         -webkit-font-smoothing: antialiased;
17 |         -moz-osx-font-smoothing: grayscale;
18 |         color: #2c3e50;
19 |         font-size: 14px;
20 |         height: 100%;
21 |     }
22 |     html, body {
23 |         width: 100%;
24 |         height: 100%;
25 |         background-image: url("./assets/bg.jpg");
26 |         background-size: 100% 100%;
27 |         background-repeat: no-repeat;
28 |     }
29 |     
30 |     /* 重置文本格式元素 */
31 |     a { text-decoration: none; }
32 |     
33 |     /* 清除内外边距 */
34 |     body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
35 |     dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
36 |     pre, /* text formatting elements 文本格式元素 */
37 |     fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
38 |     th, td { /* table elements 表格元素 */
39 |         margin: 0;
40 |         padding: 0;
41 |     }
42 |     
43 |     /* 重置表单元素 */
44 |     legend { color: #000; } /* for ie6 */
45 |     fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
46 |     /* 注：optgroup 无法扶正 */
47 |     button, input, select, textarea {
48 |         font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
49 |     }
50 |     
51 |     /* 重置表格元素 */
52 |     table {
53 |         border-collapse: collapse;
54 |         border-spacing: 0;
55 |     }
56 |     
57 |     /* 重置列表元素 */
58 |     ul, ol { list-style: none; }
59 |     button { outline: none; }
60 | 
61 | </style>


--------------------------------------------------------------------------------
/src/renderer/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/.gitkeep


--------------------------------------------------------------------------------
/src/renderer/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/bg.jpg


--------------------------------------------------------------------------------
/src/renderer/assets/l-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/l-arrow.png


--------------------------------------------------------------------------------
/src/renderer/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/logo.png


--------------------------------------------------------------------------------
/src/renderer/assets/r-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/r-arrow.png


--------------------------------------------------------------------------------
/src/renderer/assets/x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/src/renderer/assets/x.png


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="wrapper">
  3 |     <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
  4 |     <main>
  5 |       <div class="left-side">
  6 |         <span class="title">
  7 |           Welcome to your new project!
  8 |         </span>
  9 |         <system-information></system-information>
 10 |       </div>
 11 | 
 12 |       <div class="right-side">
 13 |         <div class="doc">
 14 |           <div class="title">Getting Started</div>
 15 |           <p>
 16 |             electron-vue comes packed with detailed documentation that covers everything from
 17 |             internal configurations, using the project structure, building your application,
 18 |             and so much more.
 19 |           </p>
 20 |           <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
 21 |         </div>
 22 |         <div class="doc">
 23 |           <div class="title alt">Other Documentation</div>
 24 |           <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
 25 |           <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
 26 |         </div>
 27 |       </div>
 28 |     </main>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   import SystemInformation from './LandingPage/SystemInformation'
 34 | 
 35 |   export default {
 36 |     name: 'landing-page',
 37 |     components: { SystemInformation },
 38 |     methods: {
 39 |       open (link) {
 40 |         this.$electron.shell.openExternal(link)
 41 |       }
 42 |     }
 43 |   }
 44 | </script>
 45 | 
 46 | <style>
 47 |   @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
 48 | 
 49 |   * {
 50 |     box-sizing: border-box;
 51 |     margin: 0;
 52 |     padding: 0;
 53 |   }
 54 | 
 55 |   body { font-family: 'Source Sans Pro', sans-serif; }
 56 | 
 57 |   #wrapper {
 58 |     background:
 59 |       radial-gradient(
 60 |         ellipse at top left,
 61 |         rgba(255, 255, 255, 1) 40%,
 62 |         rgba(229, 229, 229, .9) 100%
 63 |       );
 64 |     height: 100vh;
 65 |     padding: 60px 80px;
 66 |     width: 100vw;
 67 |   }
 68 | 
 69 |   #logo {
 70 |     height: auto;
 71 |     margin-bottom: 20px;
 72 |     width: 420px;
 73 |   }
 74 | 
 75 |   main {
 76 |     display: flex;
 77 |     justify-content: space-between;
 78 |   }
 79 | 
 80 |   main > div { flex-basis: 50%; }
 81 | 
 82 |   .left-side {
 83 |     display: flex;
 84 |     flex-direction: column;
 85 |   }
 86 | 
 87 |   .welcome {
 88 |     color: #555;
 89 |     font-size: 23px;
 90 |     margin-bottom: 10px;
 91 |   }
 92 | 
 93 |   .title {
 94 |     color: #2c3e50;
 95 |     font-size: 20px;
 96 |     font-weight: bold;
 97 |     margin-bottom: 6px;
 98 |   }
 99 | 
100 |   .title.alt {
101 |     font-size: 18px;
102 |     margin-bottom: 10px;
103 |   }
104 | 
105 |   .doc p {
106 |     color: black;
107 |     margin-bottom: 10px;
108 |   }
109 | 
110 |   .doc button {
111 |     font-size: .8em;
112 |     cursor: pointer;
113 |     outline: none;
114 |     padding: 0.75em 2em;
115 |     border-radius: 2em;
116 |     display: inline-block;
117 |     color: #fff;
118 |     background-color: #4fc08d;
119 |     transition: all 0.15s ease;
120 |     box-sizing: border-box;
121 |     border: 1px solid #4fc08d;
122 |   }
123 | 
124 |   .doc button.alt {
125 |     color: #42b983;
126 |     background-color: transparent;
127 |   }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/renderer/components/LandingPage/SystemInformation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="title">Information</div>
 4 |     <div class="items">
 5 |       <div class="item">
 6 |         <div class="name">Path:</div>
 7 |         <div class="value">{{ path }}</div>
 8 |       </div>
 9 |       <div class="item">
10 |         <div class="name">Route Name:</div>
11 |         <div class="value">{{ name }}</div>
12 |       </div>
13 |       <div class="item">
14 |         <div class="name">Vue.js:</div>
15 |         <div class="value">{{ vue }}</div>
16 |       </div>
17 |       <div class="item">
18 |         <div class="name">Electron:</div>
19 |         <div class="value">{{ electron }}</div>
20 |       </div>
21 |       <div class="item">
22 |         <div class="name">Node:</div>
23 |         <div class="value">{{ node }}</div>
24 |       </div>
25 |       <div class="item">
26 |         <div class="name">Platform:</div>
27 |         <div class="value">{{ platform }}</div>
28 |       </div>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 |   export default {
35 |     data () {
36 |       return {
37 |         electron: process.versions['atom-shell'],
38 |         name: 'landing-page',
39 |         node: process.versions.node,
40 |         path: '/',
41 |         platform: require('os').platform(),
42 |         vue: require('vue/package.json').version
43 |       }
44 |     }
45 |   }
46 | </script>
47 | 
48 | <style scoped>
49 |   .title {
50 |     color: #888;
51 |     font-size: 18px;
52 |     font-weight: initial;
53 |     letter-spacing: .25px;
54 |     margin-top: 10px;
55 |   }
56 | 
57 |   .items { margin-top: 8px; }
58 | 
59 |   .item {
60 |     display: flex;
61 |     margin-bottom: 6px;
62 |   }
63 | 
64 |   .item .name {
65 |     color: #6a6a6a;
66 |     margin-right: 6px;
67 |   }
68 | 
69 |   .item .value {
70 |     color: #35495e;
71 |     font-weight: bold;
72 |   }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/renderer/db.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by xushaoping on 17/9/12.
 3 |  */
 4 | 
 5 | import Datastore from 'nedb'
 6 | import path from 'path'
 7 | import { remote } from 'electron'
 8 | 
 9 | export default new Datastore({
10 |     autoload: true,
11 |     filename: path.join(remote.app.getPath('userData'), '/data.db')
12 | })


--------------------------------------------------------------------------------
/src/renderer/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import axios from 'axios'
 3 | import App from './App'
 4 | import router from './router'
 5 | import store from './store'
 6 | 
 7 | import db from './db'
 8 | Vue.prototype.$db = db
 9 | 
10 | if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
11 | Vue.http = Vue.prototype.$http = axios
12 | Vue.config.productionTip = false
13 | 
14 | /* eslint-disable no-new */
15 | new Vue({
16 |   components: { App },
17 |   router,
18 |   store,
19 |   template: '<App/>'
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/renderer/page/home/home.less:
--------------------------------------------------------------------------------
  1 | 
  2 | .page-home {
  3 |   height: 100%;
  4 |   box-sizing: border-box;
  5 |   .display {
  6 |     width: 80%;
  7 |     height: 80%;
  8 |     margin: 0 10%;
  9 |     text-align: center;
 10 |     button {
 11 |       height: 50px;
 12 |       width: 100px;
 13 |       background: #161616;
 14 |       font-size: 24px;
 15 |       border: none;
 16 |       color: #d8d8d8;
 17 |       position: fixed;
 18 |       top: 10px;
 19 |       margin-left: -50px;
 20 |       left: 50%;
 21 |       cursor: pointer;
 22 |     }
 23 |   }
 24 | }
 25 | 
 26 | .bgColor {
 27 |   padding-top: 100px;
 28 |   background-color: #161616;
 29 | }
 30 | 
 31 | .activeAllImg {
 32 |   height: 99%;
 33 |   width: 100%;
 34 | }
 35 | 
 36 | .activeWidImg {
 37 |   width: 100%;
 38 | }
 39 | 
 40 | .activeHeiImg {
 41 |   height: 100%;
 42 | }
 43 | 
 44 | .add-btn {
 45 |   position: fixed;
 46 |   width: auto;
 47 |   height: 36px;
 48 |   line-height: 36px;
 49 |   cursor: pointer;
 50 |   font-size: 24px;
 51 |   right: 5%;
 52 |   bottom: 5%;
 53 |   text-align: center;
 54 |   border-radius: 20px;
 55 | }
 56 | 
 57 | .history-list {
 58 |   height: 100%;
 59 |   width: 200px;
 60 |   //overflow-y: scroll;
 61 |   overflow: hidden;
 62 | 
 63 |   font-size: 16px;
 64 |   .history-item {
 65 |     margin-top: 20px;
 66 |     padding: 0 20px;
 67 |     &:hover {
 68 |       background-color: blanchedalmond;
 69 |       cursor: pointer;
 70 |       opacity: 0.5;
 71 |     }
 72 |     p:last-child {
 73 |       width: 180px;
 74 |       white-space: nowrap;
 75 |       text-overflow: ellipsis;
 76 |       font-size: 12px;
 77 |       overflow: hidden;
 78 |     }
 79 |   }
 80 |   img {
 81 |     float: right;
 82 |     width: 16px;
 83 |     height: 16px;
 84 |     cursor: pointer;
 85 |     &:hover {
 86 |       animation: btn linear 2s infinite;
 87 |     }
 88 |   }
 89 | }
 90 | 
 91 | @keyframes btn {
 92 |   from {
 93 |     transform: rotate(0);
 94 |   }
 95 |   to {
 96 |     transform: rotate(360deg);
 97 |   }
 98 | }
 99 | 
100 | .photo-block {
101 |   position: absolute;
102 |   opacity: 0.5;
103 |   bottom: 0;
104 |   width: 80%;
105 |   height: 100px;
106 |   overflow-y: hidden;
107 |   overflow-x: hidden;
108 |   margin: 0 auto;
109 |   .image-list {
110 |     height: 100px;
111 |     li {
112 |       float: left;
113 |       cursor: pointer;
114 |       width: 100px;
115 |       margin-left: 20px;
116 |       height: 100px;
117 |       line-height: 100px;
118 |       img {
119 |         width: 100%;
120 |         vertical-align: middle;
121 |       }
122 |     }
123 | 
124 |   }
125 | }
126 | 
127 | .active {
128 |   border: 2px solid dodgerblue;
129 |   box-sizing: border-box;
130 | }
131 | 
132 | .arrow-left {
133 |   position: absolute;
134 |   top: 50%;
135 |   margin-top: -22px;
136 |   left: 5%;
137 |   opacity: 0.5;
138 |   cursor: pointer;
139 | }
140 | 
141 | .arrow-right {
142 |   position: absolute;
143 |   top: 50%;
144 |   margin-top: -22px;
145 |   right: 5%;
146 |   opacity: 0.5;
147 |   cursor: pointer;
148 | }


--------------------------------------------------------------------------------
/src/renderer/page/home/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="page-home" :class="{ bgColor: select }">
  3 |         <div class="display" v-if="show" >
  4 |             <button  v-show="itemShow" @click="back">返回</button>
  5 |             <div class="photo-block" @mouseover="out" @mouseout="set" >
  6 |                 <ul class="image-list" :style="{ width: scrollWidth + 'px'}">
  7 |                     <li v-for="item in imageList" :class="{ active: item.id == isActive}" :key="item.id" @click="changeImg(item)" v-show="itemShow">
  8 |                         <img :src='item.url'  />
  9 |                     </li>
 10 |                 </ul>
 11 |             </div>
 12 |             <img v-show="itemShow" class="arrow-left" src="../../assets/l-arrow.png" @click="prev" />
 13 |             <img v-show="itemShow" class="arrow-right" src="../../assets/r-arrow.png" @click="next"  />
 14 |             <img class="act-img" style="max-width: 100%;max-height: 100%"  src="actImg" @mouseover="set" @mouseout="out" :class="{
 15 |                // activeAllImg: actImgHeight >= height && actImgWidth >= width,
 16 |                 activeHeiImg: actImgHeight >= actImgWidth && actImgHeight >= width ,
 17 |                 activeWidImg: actImgWidth >= actImgHeight && actImgWidth >= height
 18 |             }" />
 19 |         </div>
 20 |         
 21 |         <div style="height: 100%" v-else>
 22 |             <div class="history-list">
 23 |                 <div class="history-item" v-for="(item, index) in foldList" :key="item._id" @click="operation($event,item.path)">
 24 |                     <img src="../../assets/x.png" @click="delHistory(item._id, index)" />
 25 |                     <p>{{ item.name }}</p>
 26 |                     <p>{{ item.path }}</p>
 27 |                 </div>
 28 |             </div>
 29 |             <div class="add-btn"  @click="add">打开文件</div>
 30 |         </div>
 31 |     </div>
 32 | </template>
 33 | 
 34 | <script>
 35 |     const ipc = require('electron').ipcRenderer;
 36 |     const fs = require('fs')
 37 |     const sizeOf = require('image-size');
 38 |     
 39 |     
 40 |     // const  shell = require('shell');
 41 |     
 42 |     export default {
 43 |         name: 'page-home',
 44 |         data() {
 45 |             return {
 46 |                 select: false,
 47 |                 once: true,
 48 |                 isActive: '',
 49 |                 actImg: '',
 50 |                 actImgHeight: '',
 51 |                 actImgWidth: '',
 52 |                 show: false,
 53 |                 imageList: [],
 54 |                 foldList: [],
 55 |                 height: document.documentElement.clientHeight - 100,
 56 |                 width: document.documentElement.clientWidth * 0.8,
 57 |                 scrollWidth: 0,
 58 |                 index: 0,
 59 |                 scrollLeft: 0,
 60 |                 itemShow: false,
 61 |             }
 62 |         },
 63 |         watch: {
 64 |             imageList: function () {
 65 |                 if (this.imageList.length == 0) {
 66 |                     ipc.send('minWindow')
 67 |                 } else {
 68 |                     ipc.send('maxWindow')
 69 |                 }
 70 |             }
 71 |         },
 72 |         methods: {
 73 |             operation: function (e,path) {
 74 |                 if (e.target.tagName == 'IMG') {
 75 |                     return
 76 |                 } else {
 77 |                     this.show = true
 78 |                     fs.stat(path, (err, stats)=> {
 79 |                         if (err) {
 80 |                             return
 81 |                         } else if (stats.isFile()) {
 82 |                             if (path.slice(-3) == 'jpg' || path.slice(-3) == 'png' || path.slice(-4) == 'jpeg') {
 83 |                                 var dimensions = sizeOf(path);
 84 |                                 var buffer = fs.readFileSync(path);
 85 |                                 var blob = new Blob([buffer]);
 86 |                                 var src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
 87 |                                 this.imageList.push({
 88 |                                     url: src,
 89 |                                     id: 0,
 90 |                                     height: dimensions.height,
 91 |                                     width: dimensions.width
 92 |                                 });
 93 |                                 document.querySelector('.act-img').src = src
 94 |                                 this.isActive = 0
 95 |                                 this.actImgHeight = dimensions.height
 96 |                                 this.actImgWidth = dimensions.width
 97 |         
 98 |                                 this.select = true
 99 |                             } else {
100 |                                 alert('请确保至少有一张图片')
101 |                                 location.reload()
102 |                             }
103 |                         } else {
104 |                             fs.readdir(path, (err, files)=> {
105 |                                 if (err) {
106 |                                     alert(err)
107 |                                 }
108 |                                 files.forEach( (file)=> {
109 |                                     if (file.slice(-3) == 'jpg' || file.slice(-3) == 'png' || file.slice(-4) == 'jpeg') {
110 |                                         const url = path + '/' + file;
111 |                                         var dimensions = sizeOf(url);
112 |                                         const buffer = fs.readFileSync(url);
113 |                                         const blob = new Blob([buffer]);
114 |                                         const src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
115 |                                         if (this.once) {
116 |                                             this.once =false
117 |                                             document.querySelector('.act-img').src = src
118 |                                             this.isActive = this.index
119 |                                             this.actImgHeight = dimensions.height
120 |                                             this.actImgWidth = dimensions.width
121 |                             
122 |                                             this.select = true
123 |                                         }
124 |                                         this.imageList.push({
125 |                                             url: src,
126 |                                             id: this.index++,
127 |                                             height: dimensions.height,
128 |                                             width: dimensions.width
129 |                                         });
130 |                                         this.scrollWidth += 120
131 |                                     }
132 |                                 });
133 |                                 if (this.imageList.length == 0) {
134 |                                     alert('请确保至少有一张图片')
135 |                                     location.reload()
136 |                                 }
137 |                             })
138 |                         }
139 |                     })
140 |                 }
141 |             },
142 |             delHistory: function (id, index) {
143 |                 this.$db.remove({ _id: id }, {}, (err, numRemoved)=> {
144 |                     if (err)
145 |                         alert('出错')
146 |                     this.foldList.splice(index, 1)
147 |                     // numRemoved = 1
148 |                 });
149 |             },
150 |             back: function () {
151 |                 this.imageList = []
152 |                 this.select = false
153 |                 this.once = true
154 |                 this.index = 0
155 |                 this.scrollWidth = 0
156 |                 this.scrollLeft = 0
157 |                 this.show = false
158 |             },
159 |             set: function () {
160 |               this.itemShow = false
161 |             },
162 |             out: function () {
163 |               this.itemShow = true
164 |             },
165 |             prev: function () {
166 |                 if (this.isActive == 0) {
167 |                     ipc.send('first')
168 |                 } else {
169 |                     this.changeImg(this.imageList[this.isActive - 1])
170 |                 }
171 |             },
172 |             next: function () {
173 |                 if (this.isActive == this.imageList.length -1) {
174 |                     ipc.send('last')
175 |                 } else  {
176 |                     this.changeImg(this.imageList[this.isActive + 1])
177 |                 }
178 |             },
179 |             add: function () {
180 |                 ipc.send('open-file-dialog')
181 |             },
182 |             changeImg: function (item) {
183 |                 this.isActive = item.id
184 |                 this.actImgHeight = item.height
185 |                 this.actImgWidth = item.width
186 |                 document.querySelector('.act-img').src = item.url
187 |                 this.scrollLeft = item.id * 120
188 |                 document.querySelector('.photo-block').scrollLeft = this.scrollLeft - this.width/2
189 |             }
190 |         },
191 |         components: {},
192 |         mounted: function () {
193 |           /* this.$db.remove({}, { multi: true }, function (err, num) {
194 |                if (err)
195 |                    alert(err)
196 |                console.log(num)
197 |            })*/
198 |           
199 |             this.$db.find({}, (err, res)=> {
200 |                 this.foldList = res
201 |             })
202 |     
203 |             window.onkeyup =  (res)=> {
204 |                 if (this.imageList.length !== 0) {
205 |                     if (res.keyCode == 37) {
206 |                         this.prev()
207 |                     } else if (res.keyCode == 39) {
208 |                         this.next()
209 |                     }
210 |                 }
211 |             };
212 |             /**
213 |              * 监听事件函数
214 |              * @type {ElementTagNameMap[string]|any|Element|any}
215 |              */
216 |             ipc.on('selected-directory', (event, path)=> {
217 |                 this.show = true
218 |                 const name = path[0].slice(path[0].lastIndexOf('/') + 1);
219 |                 this.$db.insert({
220 |                     name: name,
221 |                     path: path[0]
222 |                     }, function (err) {
223 |                     if (err) {
224 |                         alert(err)
225 |                     }
226 |                 });
227 |                 fs.stat(path[0], (err, stats)=> {
228 |                     if (err) {
229 |                         return
230 |                     } else if (stats.isFile()) {
231 |                         if (path[0].slice(-3) == 'jpg' || path[0].slice(-3) == 'png' || path[0].slice(-4) == 'jpeg') {
232 |                             var dimensions = sizeOf(path[0]);
233 |                             var buffer = fs.readFileSync(path[0]);
234 |                             var blob = new Blob([buffer]);
235 |                             var src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
236 |                             this.imageList.push({
237 |                                 url: src,
238 |                                 id: 0,
239 |                                 height: dimensions.height,
240 |                                 width: dimensions.width
241 |                             });
242 |                             document.querySelector('.act-img').src = src
243 |                             this.isActive = 0
244 |                             this.actImgHeight = dimensions.height
245 |                             this.actImgWidth = dimensions.width
246 |     
247 |                             this.select = true
248 |                         } else {
249 |                             alert('请确保至少有一张图片')
250 |                             location.reload()
251 |                         }
252 |                     } else {
253 |                         fs.readdir(path[0], (err, files)=> {
254 |                             if (err) {
255 |                                 return console.log(err)
256 |                             }
257 |                             files.forEach( (file)=> {
258 |                                 if (file.slice(-3) == 'jpg' || file.slice(-3) == 'png' || file.slice(-4) == 'jpeg') {
259 |                                     const url = path[0] + '/' + file;
260 |                                     var dimensions = sizeOf(url);
261 |                                     const buffer = fs.readFileSync(url);
262 |                                     const blob = new Blob([buffer]);
263 |                                     const src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
264 |                                     if (this.once) {
265 |                                         this.once =false
266 |                                         document.querySelector('.act-img').src = src
267 |                                         this.isActive = this.index
268 |                                         this.actImgHeight = dimensions.height
269 |                                         this.actImgWidth = dimensions.width
270 |                                         
271 |                                         this.select = true
272 |                                     }
273 |                                     this.imageList.push({
274 |                                         url: src,
275 |                                         id: this.index++,
276 |                                         height: dimensions.height,
277 |                                         width: dimensions.width
278 |                                     });
279 |                                     this.scrollWidth += 120
280 |                                 }
281 |                             });
282 |                             if (this.imageList.length == 0) {
283 |                                 alert('请确保至少有一张图片')
284 |                                 location.reload()
285 |                             }
286 |                         })
287 |                     }
288 |                 })
289 |             })
290 |         },
291 |     }
292 | </script>
293 | 
294 | <style lang="less" scoped>
295 |     @import "home";
296 | </style>
297 | 


--------------------------------------------------------------------------------
/src/renderer/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | Vue.use(Router)
 4 | 
 5 | import Home from '../page/home/home.vue'
 6 | 
 7 | export default new Router({
 8 |     routes: [
 9 |         {
10 |             path: '/',
11 |             name: 'home',
12 |             component: Home
13 |         },
14 |         {
15 |             path: '*',
16 |             redirect: '/'
17 |         },
18 |         {
19 |             path: 'home',
20 |             name: 'landing-page',
21 |             component: require('@/components/LandingPage')
22 |         }
23 |     ]
24 | })
25 | 


--------------------------------------------------------------------------------
/src/renderer/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | import modules from './modules'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.Store({
 9 |   modules,
10 |   strict: process.env.NODE_ENV !== 'production'
11 | })
12 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/Counter.js:
--------------------------------------------------------------------------------
 1 | const state = {
 2 |   main: 0
 3 | }
 4 | 
 5 | const mutations = {
 6 |   DECREMENT_MAIN_COUNTER (state) {
 7 |     state.main--
 8 |   },
 9 |   INCREMENT_MAIN_COUNTER (state) {
10 |     state.main++
11 |   }
12 | }
13 | 
14 | const actions = {
15 |   someAsyncTask ({ commit }) {
16 |     // do something async
17 |     commit('INCREMENT_MAIN_COUNTER')
18 |   }
19 | }
20 | 
21 | export default {
22 |   state,
23 |   mutations,
24 |   actions
25 | }
26 | 


--------------------------------------------------------------------------------
/src/renderer/store/modules/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * The file enables `@/store/index.js` to import all vuex modules
 3 |  * in a one-shot manner. There should not be any reason to edit this file.
 4 |  */
 5 | 
 6 | const files = require.context('.', false, /\.js$/)
 7 | const modules = {}
 8 | 
 9 | files.keys().forEach(key => {
10 |   if (key === './index.js') return
11 |   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
12 | })
13 | 
14 | export default modules
15 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xu455255849/Electron-manka/5f7722c6c261b7507a9f5d1042214896ccec516f/static/.gitkeep


--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "assert": true,
 7 |     "expect": true,
 8 |     "should": true,
 9 |     "__static": true
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/test/e2e/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | // Set BABEL_ENV to use proper env config
 4 | process.env.BABEL_ENV = 'test'
 5 | 
 6 | // Enable use of ES6+ on required files
 7 | require('babel-register')({
 8 |   ignore: /node_modules/
 9 | })
10 | 
11 | // Attach Chai APIs to global scope
12 | const { expect, should, assert } = require('chai')
13 | global.expect = expect
14 | global.should = should
15 | global.assert = assert
16 | 
17 | // Require all JS files in `./specs` for Mocha to consume
18 | require('require-dir')('./specs')
19 | 


--------------------------------------------------------------------------------
/test/e2e/specs/Launch.spec.js:
--------------------------------------------------------------------------------
 1 | import utils from '../utils'
 2 | 
 3 | describe('Launch', function () {
 4 |   beforeEach(utils.beforeEach)
 5 |   afterEach(utils.afterEach)
 6 | 
 7 |   it('shows the proper application title', function () {
 8 |     return this.app.client.getTitle()
 9 |       .then(title => {
10 |         expect(title).to.equal('my-project')
11 |       })
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/test/e2e/utils.js:
--------------------------------------------------------------------------------
 1 | import electron from 'electron'
 2 | import { Application } from 'spectron'
 3 | 
 4 | export default {
 5 |   afterEach () {
 6 |     this.timeout(10000)
 7 | 
 8 |     if (this.app && this.app.isRunning()) {
 9 |       return this.app.stop()
10 |     }
11 |   },
12 |   beforeEach () {
13 |     this.timeout(10000)
14 |     this.app = new Application({
15 |       path: electron,
16 |       args: ['dist/electron/main.js'],
17 |       startTimeout: 10000,
18 |       waitTimeout: 10000
19 |     })
20 | 
21 |     return this.app.start()
22 |   }
23 | }
24 | 


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