├── .babelrc ├── .electron-vue ├── build.config.js ├── build.js ├── dev-client.js ├── dev-runner.js ├── webpack.main.config.js ├── webpack.renderer.config.js └── webpack.web.config.js ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── README.md ├── build └── icons │ ├── 256x256.png │ ├── icon.icns │ └── icon.ico ├── dist ├── electron │ └── .gitkeep └── web │ └── .gitkeep ├── package-lock.json ├── package.json ├── src ├── index.ejs ├── main │ ├── index.dev.js │ └── index.js └── renderer │ ├── App.vue │ ├── assets │ ├── .gitkeep │ └── logo.png │ ├── components │ ├── LandingPage.vue │ └── LandingPage │ │ └── SystemInformation.vue │ ├── main.js │ ├── router │ └── index.js │ └── store │ ├── counter │ ├── actions.js │ ├── index.js │ ├── mutations.js │ └── state.js │ ├── index.js │ └── modules │ ├── Counter_old.js │ └── index.js ├── static └── .gitkeep └── test ├── .eslintrc ├── e2e ├── index.js ├── specs │ └── Launch.spec.js └── utils.js └── unit ├── index.js ├── karma.conf.js └── specs └── LandingPage.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "env": { 4 | "test": { 5 | "presets": [ 6 | ["env", { 7 | "targets": { "node": 7 } 8 | }], 9 | "stage-0" 10 | ], 11 | "plugins": ["istanbul"] 12 | }, 13 | "main": { 14 | "presets": [ 15 | ["env", { 16 | "targets": { "node": 7 } 17 | }], 18 | "stage-0" 19 | ] 20 | }, 21 | "renderer": { 22 | "presets": [ 23 | ["env", { 24 | "modules": false 25 | }], 26 | "stage-0" 27 | ] 28 | }, 29 | "web": { 30 | "presets": [ 31 | ["env", { 32 | "modules": false 33 | }], 34 | "stage-0" 35 | ] 36 | } 37 | }, 38 | "plugins": ["transform-runtime"] 39 | } 40 | -------------------------------------------------------------------------------- /.electron-vue/build.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | /** 4 | * `electron-packager` options 5 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-packager.html 6 | */ 7 | module.exports = { 8 | arch: 'x64', 9 | asar: true, 10 | dir: path.join(__dirname, '../'), 11 | icon: path.join(__dirname, '../build/icons/icon'), 12 | ignore: /(^\/(src|test|\.[a-z]+|README|yarn|static|dist\/web))|\.gitkeep/, 13 | out: path.join(__dirname, '../build'), 14 | overwrite: true, 15 | platform: process.env.BUILD_TARGET || 'all' 16 | } 17 | -------------------------------------------------------------------------------- /.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 packager = require('electron-packager') 9 | const webpack = require('webpack') 10 | const Multispinner = require('multispinner') 11 | 12 | const buildConfig = require('./build.config') 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-packager`')}\n`) 49 | bundleApp() 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 | config.mode = 'production' 76 | webpack(config, (err, stats) => { 77 | if (err) reject(err.stack || err) 78 | else if (stats.hasErrors()) { 79 | let err = '' 80 | 81 | stats.toString({ 82 | chunks: false, 83 | colors: true 84 | }) 85 | .split(/\r?\n/) 86 | .forEach(line => { 87 | err += ` ${line}\n` 88 | }) 89 | 90 | reject(err) 91 | } else { 92 | resolve(stats.toString({ 93 | chunks: false, 94 | colors: true 95 | })) 96 | } 97 | }) 98 | }) 99 | } 100 | 101 | function bundleApp () { 102 | buildConfig.mode = 'production' 103 | packager(buildConfig, (err, appPaths) => { 104 | if (err) { 105 | console.log(`\n${errorLog}${chalk.yellow('`electron-packager`')} says...\n`) 106 | console.log(err + '\n') 107 | } else { 108 | console.log(`\n${doneLog}\n`) 109 | } 110 | }) 111 | } 112 | 113 | function web () { 114 | del.sync(['dist/web/*', '!.gitkeep']) 115 | webConfig.mode = 'production' 116 | webpack(webConfig, (err, stats) => { 117 | if (err || stats.hasErrors()) console.log(err) 118 | 119 | console.log(stats.toString({ 120 | chunks: false, 121 | colors: true 122 | })) 123 | 124 | process.exit() 125 | }) 126 | } 127 | 128 | function greeting () { 129 | const cols = process.stdout.columns 130 | let text = '' 131 | 132 | if (cols > 85) text = 'lets-build' 133 | else if (cols > 60) text = 'lets-|build' 134 | else text = false 135 | 136 | if (text && !isCI) { 137 | say(text, { 138 | colors: ['yellow'], 139 | font: 'simple3d', 140 | space: false 141 | }) 142 | } else console.log(chalk.yellow.bold('\n lets-build')) 143 | console.log() 144 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | rendererConfig.mode = 'development' 45 | const compiler = webpack(rendererConfig) 46 | hotMiddleware = webpackHotMiddleware(compiler, { 47 | log: false, 48 | heartbeat: 2500 49 | }) 50 | 51 | compiler.hooks.compilation.tap('compilation', compilation => { 52 | compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => { 53 | hotMiddleware.publish({ action: 'reload' }) 54 | cb() 55 | }) 56 | }) 57 | 58 | compiler.hooks.done.tap('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 | mainConfig.mode = 'development' 84 | const compiler = webpack(mainConfig) 85 | 86 | compiler.hooks.watchRun.tapAsync('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 | var args = [ 118 | '--inspect=5858', 119 | path.join(__dirname, '../dist/electron/main.js') 120 | ] 121 | 122 | // detect yarn or npm and process commandline args accordingly 123 | if (process.env.npm_execpath.endsWith('yarn.js')) { 124 | args = args.concat(process.argv.slice(3)) 125 | } else if (process.env.npm_execpath.endsWith('npm-cli.js')) { 126 | args = args.concat(process.argv.slice(2)) 127 | } 128 | 129 | electronProcess = spawn(electron, args) 130 | 131 | electronProcess.stdout.on('data', data => { 132 | electronLog(data, 'blue') 133 | }) 134 | electronProcess.stderr.on('data', data => { 135 | electronLog(data, 'red') 136 | }) 137 | 138 | electronProcess.on('close', () => { 139 | if (!manualRestart) process.exit() 140 | }) 141 | } 142 | 143 | function electronLog (data, color) { 144 | let log = '' 145 | data = data.toString().split(/\r?\n/) 146 | data.forEach(line => { 147 | log += ` ${line}\n` 148 | }) 149 | if (/[0-9A-z]+/.test(log)) { 150 | console.log( 151 | chalk[color].bold('┏ Electron -------------------') + 152 | '\n\n' + 153 | log + 154 | chalk[color].bold('┗ ----------------------------') + 155 | '\n' 156 | ) 157 | } 158 | } 159 | 160 | function greeting () { 161 | const cols = process.stdout.columns 162 | let text = '' 163 | 164 | if (cols > 104) text = 'electron-vue' 165 | else if (cols > 76) text = 'electron-|vue' 166 | else text = false 167 | 168 | if (text) { 169 | say(text, { 170 | colors: ['yellow'], 171 | font: 'simple3d', 172 | space: false 173 | }) 174 | } else console.log(chalk.yellow.bold('\n electron-vue')) 175 | console.log(chalk.blue(' getting ready...') + '\n') 176 | } 177 | 178 | function init () { 179 | greeting() 180 | 181 | Promise.all([startRenderer(), startMain()]) 182 | .then(() => { 183 | startElectron() 184 | }) 185 | .catch(err => { 186 | console.error(err) 187 | }) 188 | } 189 | 190 | init() 191 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 MiniCssExtractPlugin = require('mini-css-extract-plugin') 12 | const HtmlWebpackPlugin = require('html-webpack-plugin') 13 | const { VueLoaderPlugin } = require('vue-loader') 14 | 15 | /** 16 | * List of node_modules to include in webpack bundle 17 | * 18 | * Required for specific packages like Vue UI libraries 19 | * that provide pure *.vue files that need compiling 20 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals 21 | */ 22 | let whiteListedModules = ['vue'] 23 | 24 | let rendererConfig = { 25 | devtool: '#cheap-module-eval-source-map', 26 | entry: { 27 | renderer: path.join(__dirname, '../src/renderer/main.js') 28 | }, 29 | externals: [ 30 | ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)) 31 | ], 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.(js|vue)$/, 36 | enforce: 'pre', 37 | exclude: /node_modules/, 38 | use: { 39 | loader: 'eslint-loader', 40 | options: { 41 | formatter: require('eslint-friendly-formatter') 42 | } 43 | } 44 | }, 45 | { 46 | test: /\.less$/, 47 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 48 | }, 49 | { 50 | test: /\.css$/, 51 | use: ['vue-style-loader', 'css-loader'] 52 | }, 53 | { 54 | test: /\.html$/, 55 | use: 'vue-html-loader' 56 | }, 57 | { 58 | test: /\.js$/, 59 | use: 'babel-loader', 60 | exclude: /node_modules/ 61 | }, 62 | { 63 | test: /\.node$/, 64 | use: 'node-loader' 65 | }, 66 | { 67 | test: /\.vue$/, 68 | use: { 69 | loader: 'vue-loader', 70 | options: { 71 | extractCSS: process.env.NODE_ENV === 'production', 72 | loaders: { 73 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 74 | scss: 'vue-style-loader!css-loader!sass-loader', 75 | less: 'vue-style-loader!css-loader!less-loader' 76 | } 77 | } 78 | } 79 | }, 80 | { 81 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 82 | use: { 83 | loader: 'url-loader', 84 | query: { 85 | limit: 10000, 86 | name: 'imgs/[name]--[folder].[ext]' 87 | } 88 | } 89 | }, 90 | { 91 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 92 | loader: 'url-loader', 93 | options: { 94 | limit: 10000, 95 | name: 'media/[name]--[folder].[ext]' 96 | } 97 | }, 98 | { 99 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 100 | use: { 101 | loader: 'url-loader', 102 | query: { 103 | limit: 10000, 104 | name: 'fonts/[name]--[folder].[ext]' 105 | } 106 | } 107 | } 108 | ] 109 | }, 110 | node: { 111 | __dirname: process.env.NODE_ENV !== 'production', 112 | __filename: process.env.NODE_ENV !== 'production' 113 | }, 114 | plugins: [ 115 | new VueLoaderPlugin(), 116 | new MiniCssExtractPlugin({filename: 'styles.css'}), 117 | new HtmlWebpackPlugin({ 118 | filename: 'index.html', 119 | template: path.resolve(__dirname, '../src/index.ejs'), 120 | minify: { 121 | collapseWhitespace: true, 122 | removeAttributeQuotes: true, 123 | removeComments: true 124 | }, 125 | nodeModules: process.env.NODE_ENV !== 'production' 126 | ? path.resolve(__dirname, '../node_modules') 127 | : false 128 | }), 129 | new webpack.HotModuleReplacementPlugin(), 130 | new webpack.NoEmitOnErrorsPlugin() 131 | ], 132 | output: { 133 | filename: '[name].js', 134 | libraryTarget: 'commonjs2', 135 | path: path.join(__dirname, '../dist/electron') 136 | }, 137 | resolve: { 138 | alias: { 139 | '@': path.join(__dirname, '../src/renderer'), 140 | 'vue$': 'vue/dist/vue.esm.js' 141 | }, 142 | extensions: ['.js', '.vue', '.json', '.css', '.node'] 143 | }, 144 | target: 'electron-renderer' 145 | } 146 | 147 | /** 148 | * Adjust rendererConfig for development settings 149 | */ 150 | if (process.env.NODE_ENV !== 'production') { 151 | rendererConfig.plugins.push( 152 | new webpack.DefinePlugin({ 153 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 154 | }) 155 | ) 156 | } 157 | 158 | /** 159 | * Adjust rendererConfig for production settings 160 | */ 161 | if (process.env.NODE_ENV === 'production') { 162 | rendererConfig.devtool = '' 163 | 164 | rendererConfig.plugins.push( 165 | new BabiliWebpackPlugin(), 166 | new CopyWebpackPlugin([ 167 | { 168 | from: path.join(__dirname, '../static'), 169 | to: path.join(__dirname, '../dist/electron/static'), 170 | ignore: ['.*'] 171 | } 172 | ]), 173 | new webpack.DefinePlugin({ 174 | 'process.env.NODE_ENV': '"production"' 175 | }), 176 | new webpack.LoaderOptionsPlugin({ 177 | minimize: true 178 | }) 179 | ) 180 | } 181 | 182 | module.exports = rendererConfig 183 | -------------------------------------------------------------------------------- /.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 MiniCssExtractPlugin = require('mini-css-extract-plugin') 11 | const HtmlWebpackPlugin = require('html-webpack-plugin') 12 | const { VueLoaderPlugin } = require('vue-loader') 13 | 14 | let webConfig = { 15 | devtool: '#cheap-module-eval-source-map', 16 | entry: { 17 | web: path.join(__dirname, '../src/renderer/main.js') 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.(js|vue)$/, 23 | enforce: 'pre', 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'eslint-loader', 27 | options: { 28 | formatter: require('eslint-friendly-formatter') 29 | } 30 | } 31 | }, 32 | { 33 | test: /\.less$/, 34 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 35 | }, 36 | { 37 | test: /\.css$/, 38 | use: ['vue-style-loader', 'css-loader'] 39 | }, 40 | { 41 | test: /\.html$/, 42 | use: 'vue-html-loader' 43 | }, 44 | { 45 | test: /\.js$/, 46 | use: 'babel-loader', 47 | include: [ path.resolve(__dirname, '../src/renderer') ], 48 | exclude: /node_modules/ 49 | }, 50 | { 51 | test: /\.vue$/, 52 | use: { 53 | loader: 'vue-loader', 54 | options: { 55 | extractCSS: true, 56 | loaders: { 57 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 58 | scss: 'vue-style-loader!css-loader!sass-loader', 59 | less: 'vue-style-loader!css-loader!less-loader' 60 | } 61 | } 62 | } 63 | }, 64 | { 65 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 66 | use: { 67 | loader: 'url-loader', 68 | query: { 69 | limit: 10000, 70 | name: 'imgs/[name].[ext]' 71 | } 72 | } 73 | }, 74 | { 75 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 76 | use: { 77 | loader: 'url-loader', 78 | query: { 79 | limit: 10000, 80 | name: 'fonts/[name].[ext]' 81 | } 82 | } 83 | } 84 | ] 85 | }, 86 | plugins: [ 87 | new VueLoaderPlugin(), 88 | new MiniCssExtractPlugin({filename: 'styles.css'}), 89 | new HtmlWebpackPlugin({ 90 | filename: 'index.html', 91 | template: path.resolve(__dirname, '../src/index.ejs'), 92 | minify: { 93 | collapseWhitespace: true, 94 | removeAttributeQuotes: true, 95 | removeComments: true 96 | }, 97 | nodeModules: false 98 | }), 99 | new webpack.DefinePlugin({ 100 | 'process.env.IS_WEB': 'true' 101 | }), 102 | new webpack.HotModuleReplacementPlugin(), 103 | new webpack.NoEmitOnErrorsPlugin() 104 | ], 105 | output: { 106 | filename: '[name].js', 107 | path: path.join(__dirname, '../dist/web') 108 | }, 109 | resolve: { 110 | alias: { 111 | '@': path.join(__dirname, '../src/renderer'), 112 | 'vue$': 'vue/dist/vue.esm.js' 113 | }, 114 | extensions: ['.js', '.vue', '.json', '.css'] 115 | }, 116 | target: 'web' 117 | } 118 | 119 | /** 120 | * Adjust webConfig for production settings 121 | */ 122 | if (process.env.NODE_ENV === 'production') { 123 | webConfig.devtool = '' 124 | 125 | webConfig.plugins.push( 126 | new BabiliWebpackPlugin(), 127 | new CopyWebpackPlugin([ 128 | { 129 | from: path.join(__dirname, '../static'), 130 | to: path.join(__dirname, '../dist/web/static'), 131 | ignore: ['.*'] 132 | } 133 | ]), 134 | new webpack.DefinePlugin({ 135 | 'process.env.NODE_ENV': '"production"' 136 | }), 137 | new webpack.LoaderOptionsPlugin({ 138 | minimize: true 139 | }) 140 | ) 141 | } 142 | 143 | module.exports = webConfig 144 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | test/unit/coverage/** 2 | test/unit/*.js 3 | test/e2e/*.js 4 | -------------------------------------------------------------------------------- /.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 | extends: 'standard', 12 | globals: { 13 | __static: true 14 | }, 15 | plugins: [ 16 | 'html' 17 | ], 18 | 'rules': { 19 | // allow paren-less arrow functions 20 | 'arrow-parens': 0, 21 | // allow async-await 22 | 'generator-star-spacing': 0, 23 | // allow debugger during development 24 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/electron/* 3 | dist/web/* 4 | build/* 5 | !build/icons 6 | coverage 7 | node_modules/ 8 | npm-debug.log 9 | npm-debug.log.* 10 | thumbs.db 11 | !.gitkeep 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Electron-vue (Updated) 2 | 3 | ## Overview 4 | 5 | The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of `vue-cli` for scaffolding, `webpack` with `vue-loader`, `electron-packager` or `electron-builder`, and some of the most used plugins like `vue-router`, `vuex`, and so much more. 6 | 7 | 8 | #### Build Setup 9 | 10 | ``` bash 11 | # install dependencies 12 | npm install 13 | 14 | # serve with hot reload at localhost:9080 15 | npm run dev 16 | 17 | # build electron application for production 18 | npm run build 19 | 20 | # run unit & end-to-end tests 21 | npm test 22 | 23 | 24 | # lint all JS/Vue component files in `src/` 25 | npm run lint 26 | 27 | ``` 28 | 29 | --- 30 | 31 | This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) 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). 32 | -------------------------------------------------------------------------------- /build/icons/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/build/icons/256x256.png -------------------------------------------------------------------------------- /build/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/build/icons/icon.icns -------------------------------------------------------------------------------- /build/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/build/icons/icon.ico -------------------------------------------------------------------------------- /dist/electron/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/dist/electron/.gitkeep -------------------------------------------------------------------------------- /dist/web/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/dist/web/.gitkeep -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-vue", 3 | "productName": "electron-vue", 4 | "version": "0.0.1", 5 | "author": "patryckx", 6 | "description": "An electron-vue project", 7 | "license": null, 8 | "main": "./dist/electron/main.js", 9 | "scripts": { 10 | "build": "node .electron-vue/build.js", 11 | "build:darwin": "cross-env BUILD_TARGET=darwin node .electron-vue/build.js", 12 | "build:linux": "cross-env BUILD_TARGET=linux node .electron-vue/build.js", 13 | "build:mas": "cross-env BUILD_TARGET=mas node .electron-vue/build.js", 14 | "build:win32": "cross-env BUILD_TARGET=win32 node .electron-vue/build.js", 15 | "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", 16 | "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js", 17 | "dev": "node .electron-vue/dev-runner.js", 18 | "e2e": "npm run pack && mocha test/e2e", 19 | "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test", 20 | "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test", 21 | "pack": "npm run pack:main && npm run pack:renderer", 22 | "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js", 23 | "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js", 24 | "test": "npm run unit && npm run e2e", 25 | "unit": "karma start test/unit/karma.conf.js", 26 | "postinstall": "npm run lint:fix" 27 | }, 28 | "dependencies": { 29 | "axios": "^0.19.0", 30 | "vue": "^2.6.10", 31 | "vue-electron": "^1.0.6", 32 | "vue-router": "^3.0.7", 33 | "vuex": "^3.1.1", 34 | "vuex-electron": "^1.0.3" 35 | }, 36 | "devDependencies": { 37 | "ajv": "^6.10.2", 38 | "babel-core": "^6.26.3", 39 | "babel-eslint": "^8.2.3", 40 | "babel-loader": "^7.1.4", 41 | "babel-plugin-istanbul": "^5.1.4", 42 | "babel-plugin-transform-runtime": "^6.23.0", 43 | "babel-preset-env": "^1.7.0", 44 | "babel-preset-stage-0": "^6.24.1", 45 | "babel-register": "^6.26.0", 46 | "babili-webpack-plugin": "^0.1.2", 47 | "cfonts": "^2.4.3", 48 | "chai": "^4.1.2", 49 | "chalk": "^2.4.1", 50 | "copy-webpack-plugin": "^4.5.1", 51 | "cross-env": "^5.1.6", 52 | "css-loader": "^3.0.0", 53 | "del": "^3.0.0", 54 | "devtron": "^1.4.0", 55 | "electron": "^4.2.7", 56 | "electron-builder": "^20.40.2", 57 | "electron-debug": "^2.1.0", 58 | "electron-devtools-installer": "^2.2.4", 59 | "electron-packager": "^13.1.1", 60 | "electron-rebuild": "^1.8.4", 61 | "eslint": "^4.19.1", 62 | "eslint-config-standard": "^11.0.0", 63 | "eslint-friendly-formatter": "^4.0.1", 64 | "eslint-loader": "^2.2.1", 65 | "eslint-plugin-html": "^4.0.3", 66 | "eslint-plugin-import": "^2.18.0", 67 | "eslint-plugin-node": "^6.0.1", 68 | "eslint-plugin-promise": "^3.8.0", 69 | "eslint-plugin-standard": "^3.1.0", 70 | "file-loader": "^1.1.11", 71 | "html-webpack-plugin": "^3.2.0", 72 | "inject-loader": "^4.0.1", 73 | "karma": "^4.2.0", 74 | "karma-chai": "^0.1.0", 75 | "karma-coverage": "^1.1.2", 76 | "karma-electron": "^6.3.0", 77 | "karma-mocha": "^1.3.0", 78 | "karma-sourcemap-loader": "^0.3.7", 79 | "karma-spec-reporter": "^0.0.32", 80 | "karma-webpack": "^3.0.0", 81 | "mini-css-extract-plugin": "0.4.0", 82 | "mocha": "^5.2.0", 83 | "multispinner": "^0.2.1", 84 | "node-loader": "^0.6.0", 85 | "require-dir": "^1.0.0", 86 | "spectron": "^3.8.0", 87 | "style-loader": "^0.21.0", 88 | "url-loader": "^1.0.1", 89 | "vue-html-loader": "^1.2.4", 90 | "vue-loader": "^15.7.0", 91 | "vue-style-loader": "^4.1.0", 92 | "vue-template-compiler": "^2.6.10", 93 | "webpack": "^4.35.3", 94 | "webpack-cli": "^3.3.6", 95 | "webpack-dev-server": "^3.7.2", 96 | "webpack-hot-middleware": "^2.25.0", 97 | "webpack-merge": "^4.1.3" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | new-atm 6 | <% if (htmlWebpackPlugin.options.nodeModules) { %> 7 | 8 | 11 | <% } %> 12 | 13 | 14 |
15 | 16 | <% if (!process.browser) { %> 17 | 20 | <% } %> 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /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 | // Install `electron-debug` with `devtron` 11 | require('electron-debug')({ showDevTools: true }) 12 | 13 | // Install `vue-devtools` 14 | require('electron').app.on('ready', () => { 15 | let installExtension = require('electron-devtools-installer') 16 | installExtension.default(installExtension.VUEJS_DEVTOOLS) 17 | .then(() => {}) 18 | .catch(err => { 19 | console.log('Unable to install `vue-devtools`: \n', err) 20 | }) 21 | }) 22 | 23 | // Require `main` process to boot app 24 | require('./index') -------------------------------------------------------------------------------- /src/main/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { app, BrowserWindow } from 'electron' 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: 563, 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 | -------------------------------------------------------------------------------- /src/renderer/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/renderer/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/src/renderer/assets/.gitkeep -------------------------------------------------------------------------------- /src/renderer/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/src/renderer/assets/logo.png -------------------------------------------------------------------------------- /src/renderer/components/LandingPage.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 52 | 53 | 136 | -------------------------------------------------------------------------------- /src/renderer/components/LandingPage/SystemInformation.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 47 | 48 | 74 | -------------------------------------------------------------------------------- /src/renderer/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from 'axios' 3 | 4 | import App from './App' 5 | import router from './router' 6 | import store from './store' 7 | 8 | if (!process.env.IS_WEB) Vue.use(require('vue-electron')) 9 | Vue.http = Vue.prototype.$http = axios 10 | Vue.config.productionTip = false 11 | 12 | /* eslint-disable no-new */ 13 | new Vue({ 14 | components: { App }, 15 | router, 16 | store, 17 | template: '' 18 | }).$mount('#app') 19 | -------------------------------------------------------------------------------- /src/renderer/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'landing-page', 11 | component: require('@/components/LandingPage').default 12 | }, 13 | { 14 | path: '*', 15 | redirect: '/' 16 | } 17 | ] 18 | }) 19 | -------------------------------------------------------------------------------- /src/renderer/store/counter/actions.js: -------------------------------------------------------------------------------- 1 | const incrementa = ({ commit }) => { 2 | // do something async 3 | commit('INCREMENT_MAIN_COUNTER') 4 | } 5 | 6 | const decrementa = ({ commit }) => { 7 | commit('DECREMENT_MAIN_COUNTER') 8 | } 9 | 10 | export { 11 | incrementa, 12 | decrementa 13 | } 14 | -------------------------------------------------------------------------------- /src/renderer/store/counter/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as mutations from './mutations' 3 | import * as actions from './actions' 4 | 5 | export default { 6 | namespaced: true, 7 | actions, 8 | state, 9 | mutations 10 | } 11 | -------------------------------------------------------------------------------- /src/renderer/store/counter/mutations.js: -------------------------------------------------------------------------------- 1 | const DECREMENT_MAIN_COUNTER = (state) => { 2 | state.main-- 3 | } 4 | 5 | const INCREMENT_MAIN_COUNTER = (state) => { 6 | state.main++ 7 | } 8 | 9 | export { 10 | INCREMENT_MAIN_COUNTER, 11 | DECREMENT_MAIN_COUNTER 12 | } 13 | -------------------------------------------------------------------------------- /src/renderer/store/counter/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | main: 0 3 | } 4 | -------------------------------------------------------------------------------- /src/renderer/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import Counter from './counter' 5 | Vue.use(Vuex) 6 | 7 | const store = new Vuex.Store({ 8 | modules: { 9 | Counter 10 | } 11 | }) 12 | 13 | export default store 14 | -------------------------------------------------------------------------------- /src/renderer/store/modules/Counter_old.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 | '@/store/index.js' 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/patrickmonteiro/electron-vue/12a7b3e03b507581046e17496fa5441e0e90a6e4/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('new-atm') 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 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.config.devtools = false 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src/renderer', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const merge = require('webpack-merge') 5 | const webpack = require('webpack') 6 | 7 | const baseConfig = require('../../.electron-vue/webpack.renderer.config') 8 | const projectRoot = path.resolve(__dirname, '../../src/renderer') 9 | 10 | // Set BABEL_ENV to use proper preset config 11 | process.env.BABEL_ENV = 'test' 12 | 13 | let webpackConfig = merge(baseConfig, { 14 | devtool: '#inline-source-map', 15 | plugins: [ 16 | new webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': '"testing"' 18 | }) 19 | ] 20 | }) 21 | 22 | // don't treat dependencies as externals 23 | delete webpackConfig.entry 24 | delete webpackConfig.externals 25 | delete webpackConfig.output.libraryTarget 26 | 27 | // apply vue option to apply isparta-loader on js 28 | webpackConfig.module.rules 29 | .find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader' 30 | 31 | module.exports = config => { 32 | config.set({ 33 | browsers: ['visibleElectron'], 34 | client: { 35 | useIframe: false 36 | }, 37 | coverageReporter: { 38 | dir: './coverage', 39 | reporters: [ 40 | { type: 'lcov', subdir: '.' }, 41 | { type: 'text-summary' } 42 | ] 43 | }, 44 | customLaunchers: { 45 | 'visibleElectron': { 46 | base: 'Electron', 47 | flags: ['--show'] 48 | } 49 | }, 50 | frameworks: ['mocha', 'chai'], 51 | files: ['./index.js'], 52 | preprocessors: { 53 | './index.js': ['webpack', 'sourcemap'] 54 | }, 55 | reporters: ['spec', 'coverage'], 56 | singleRun: true, 57 | webpack: webpackConfig, 58 | webpackMiddleware: { 59 | noInfo: true 60 | } 61 | }) 62 | } 63 | -------------------------------------------------------------------------------- /test/unit/specs/LandingPage.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import LandingPage from '@/components/LandingPage' 3 | 4 | describe('LandingPage.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | el: document.createElement('div'), 8 | render: h => h(LandingPage) 9 | }).$mount() 10 | 11 | expect(vm.$el.querySelector('.title').textContent).to.contain('Welcome to your new project!') 12 | }) 13 | }) 14 | --------------------------------------------------------------------------------