init

.babelrc

@@ -2,11 +2,26 @@
   "comments": false,
   "env": {
     "main": {
-      "presets": ["es2015", "stage-0"]
+      "presets": [
+        ["env", {
+          "targets": { "node": 7 }
+        }],
+        "stage-0"
+      ]
     },
     "renderer": {
       "presets": [
-        ["es2015", { "modules": false }],
+        ["env", {
+          "modules": false
+        }],
+        "stage-0"
+      ]
+    },
+    "web": {
+      "presets": [
+        ["env", {
+          "modules": false
+        }],
         "stage-0"
       ]
     }

.electron-vue/build.js

+'use strict'
+
+process.env.NODE_ENV = 'production'
+
+const { say } = require('cfonts')
+const chalk = require('chalk')
+const del = require('del')
+const { spawn } = require('child_process')
+const webpack = require('webpack')
+const Multispinner = require('multispinner')
+
+
+const mainConfig = require('./webpack.main.config')
+const rendererConfig = require('./webpack.renderer.config')
+const webConfig = require('./webpack.web.config')
+
+const doneLog = chalk.bgGreen.white(' DONE ') + ' '
+const errorLog = chalk.bgRed.white(' ERROR ') + ' '
+const okayLog = chalk.bgBlue.white(' OKAY ') + ' '
+const isCI = process.env.CI || false
+
+if (process.env.BUILD_TARGET === 'clean') clean()
+else if (process.env.BUILD_TARGET === 'web') web()
+else build()
+
+function clean () {
+  del.sync(['build/*', '!build/icons', '!build/icons/icon.*'])
+  console.log(`\n${doneLog}\n`)
+  process.exit()
+}
+
+function build () {
+  greeting()
+
+  del.sync(['dist/electron/*', '!.gitkeep'])
+
+  const tasks = ['main', 'renderer']
+  const m = new Multispinner(tasks, {
+    preText: 'building',
+    postText: 'process'
+  })
+
+  let results = ''
+
+  m.on('success', () => {
+    process.stdout.write('\x1B[2J\x1B[0f')
+    console.log(`\n\n${results}`)
+    console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
+    process.exit()
+  })
+
+  pack(mainConfig).then(result => {
+    results += result + '\n\n'
+    m.success('main')
+  }).catch(err => {
+    m.error('main')
+    console.log(`\n  ${errorLog}failed to build main process`)
+    console.error(`\n${err}\n`)
+    process.exit(1)
+  })
+
+  pack(rendererConfig).then(result => {
+    results += result + '\n\n'
+    m.success('renderer')
+  }).catch(err => {
+    m.error('renderer')
+    console.log(`\n  ${errorLog}failed to build renderer process`)
+    console.error(`\n${err}\n`)
+    process.exit(1)
+  })
+}
+
+function pack (config) {
+  return new Promise((resolve, reject) => {
+    webpack(config, (err, stats) => {
+      if (err) reject(err.stack || err)
+      else if (stats.hasErrors()) {
+        let err = ''
+
+        stats.toString({
+          chunks: false,
+          colors: true
+        })
+        .split(/\r?\n/)
+        .forEach(line => {
+          err += `    ${line}\n`
+        })
+
+        reject(err)
+      } else {
+        resolve(stats.toString({
+          chunks: false,
+          colors: true
+        }))
+      }
+    })
+  })
+}
+
+function web () {
+  del.sync(['dist/web/*', '!.gitkeep'])
+  webpack(webConfig, (err, stats) => {
+    if (err || stats.hasErrors()) console.log(err)
+
+    console.log(stats.toString({
+      chunks: false,
+      colors: true
+    }))
+
+    process.exit()
+  })
+}
+
+function greeting () {
+  const cols = process.stdout.columns
+  let text = ''
+
+  if (cols > 85) text = 'lets-build'
+  else if (cols > 60) text = 'lets-|build'
+  else text = false
+
+  if (text && !isCI) {
+    say(text, {
+      colors: ['yellow'],
+      font: 'simple3d',
+      space: false
+    })
+  } else console.log(chalk.yellow.bold('\n  lets-build'))
+  console.log()
+}

.electron-vue/dev-client.js

+const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(event => {
+  /**
+   * Reload browser when HTMLWebpackPlugin emits a new index.html
+   *
+   * Currently disabled until jantimon/html-webpack-plugin#680 is resolved.
+   * https://github.com/SimulatedGREG/electron-vue/issues/437
+   * https://github.com/jantimon/html-webpack-plugin/issues/680
+   */
+  // if (event.action === 'reload') {
+  //   window.location.reload()
+  // }
+
+  /**
+   * Notify `mainWindow` when `main` process is compiling,
+   * giving notice for an expected reload of the `electron` process
+   */
+  if (event.action === 'compiling') {
+    document.body.innerHTML += `
+      <style>
+        #dev-client {
+          background: #4fc08d;
+          border-radius: 4px;
+          bottom: 20px;
+          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);
+          color: #fff;
+          font-family: 'Source Sans Pro', sans-serif;
+          left: 20px;
+          padding: 8px 12px;
+          position: absolute;
+        }
+      </style>
+
+      <div id="dev-client">
+        Compiling Main Process...
+      </div>
+    `
+  }
+})

.electron-vue/dev-runner.js

+'use strict'
+
+const chalk = require('chalk')
+const electron = require('electron')
+const path = require('path')
+const { say } = require('cfonts')
+const { spawn } = require('child_process')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const webpackHotMiddleware = require('webpack-hot-middleware')
+
+const mainConfig = require('./webpack.main.config')
+const rendererConfig = require('./webpack.renderer.config')
+
+let electronProcess = null
+let manualRestart = false
+let hotMiddleware
+
+function logStats (proc, data) {
+  let log = ''
+
+  log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`)
+  log += '\n\n'
+
+  if (typeof data === 'object') {
+    data.toString({
+      colors: true,
+      chunks: false
+    }).split(/\r?\n/).forEach(line => {
+      log += '  ' + line + '\n'
+    })
+  } else {
+    log += `  ${data}\n`
+  }
+
+  log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n'
+
+  console.log(log)
+}
+
+function startRenderer () {
+  return new Promise((resolve, reject) => {
+    rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
+
+    const compiler = webpack(rendererConfig)
+    hotMiddleware = webpackHotMiddleware(compiler, { 
+      log: false, 
+      heartbeat: 2500 
+    })
+
+    compiler.plugin('compilation', compilation => {
+      compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
+        hotMiddleware.publish({ action: 'reload' })
+        cb()
+      })
+    })
+
+    compiler.plugin('done', stats => {
+      logStats('Renderer', stats)
+    })
+
+    const server = new WebpackDevServer(
+      compiler,
+      {
+        contentBase: path.join(__dirname, '../'),
+        quiet: true,
+        before (app, ctx) {
+          app.use(hotMiddleware)
+          ctx.middleware.waitUntilValid(() => {
+            resolve()
+          })
+        }
+      }
+    )
+
+    server.listen(9080)
+  })
+}
+
+function startMain () {
+  return new Promise((resolve, reject) => {
+    mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
+
+    const compiler = webpack(mainConfig)
+
+    compiler.plugin('watch-run', (compilation, done) => {
+      logStats('Main', chalk.white.bold('compiling...'))
+      hotMiddleware.publish({ action: 'compiling' })
+      done()
+    })
+
+    compiler.watch({}, (err, stats) => {
+      if (err) {
+        console.log(err)
+        return
+      }
+
+      logStats('Main', stats)
+
+      if (electronProcess && electronProcess.kill) {
+        manualRestart = true
+        process.kill(electronProcess.pid)
+        electronProcess = null
+        startElectron()
+
+        setTimeout(() => {
+          manualRestart = false
+        }, 5000)
+      }
+
+      resolve()
+    })
+  })
+}
+
+function startElectron () {
+  electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')])
+
+  electronProcess.stdout.on('data', data => {
+    electronLog(data, 'blue')
+  })
+  electronProcess.stderr.on('data', data => {
+    electronLog(data, 'red')
+  })
+
+  electronProcess.on('close', () => {
+    if (!manualRestart) process.exit()
+  })
+}
+
+function electronLog (data, color) {
+  let log = ''
+  data = data.toString().split(/\r?\n/)
+  data.forEach(line => {
+    log += `  ${line}\n`
+  })
+  if (/[0-9A-z]+/.test(log)) {
+    console.log(
+      chalk[color].bold('┏ Electron -------------------') +
+      '\n\n' +
+      log +
+      chalk[color].bold('┗ ----------------------------') +
+      '\n'
+    )
+  }
+}
+
+function greeting () {
+  const cols = process.stdout.columns
+  let text = ''
+
+  if (cols > 104) text = 'electron-vue'
+  else if (cols > 76) text = 'electron-|vue'
+  else text = false
+
+  if (text) {
+    say(text, {
+      colors: ['yellow'],
+      font: 'simple3d',
+      space: false
+    })
+  } else console.log(chalk.yellow.bold('\n  electron-vue'))
+  console.log(chalk.blue('  getting ready...') + '\n')
+}
+
+function init () {
+  greeting()
+
+  Promise.all([startRenderer(), startMain()])
+    .then(() => {
+      startElectron()
+    })
+    .catch(err => {
+      console.error(err)
+    })
+}
+
+init()

webpack.main.config.js → .electron-vue/webpack.main.config.js

@@ -3,58 +3,81 @@
 process.env.BABEL_ENV = 'main'
 
 const path = require('path')
-const pkg = require('./app/package.json')
+const { dependencies } = require('../package.json')
 const webpack = require('webpack')
 
+const BabiliWebpackPlugin = require('babili-webpack-plugin')
+
 let mainConfig = {
   entry: {
-    main: path.join(__dirname, 'app/src/main/index.js')
+    main: path.join(__dirname, '../src/main/index.js')
   },
-  externals: Object.keys(pkg.dependencies || {}),
+  externals: [
+    ...Object.keys(dependencies || {})
+  ],
   module: {
     rules: [
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
+        test: /\.(js)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter')
+          }
+        }
       },
       {
-        test: /\.json$/,
-        loader: 'json-loader'
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
       },
       {
         test: /\.node$/,
-        loader: 'node-loader'
+        use: 'node-loader'
       }
     ]
   },
   node: {
-    __dirname: false,
-    __filename: false
+    __dirname: process.env.NODE_ENV !== 'production',
+    __filename: process.env.NODE_ENV !== 'production'
   },
   output: {
     filename: '[name].js',
     libraryTarget: 'commonjs2',
-    path: path.join(__dirname, 'app/dist')
+    path: path.join(__dirname, '../dist/electron')
   },
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
+    new webpack.NoEmitOnErrorsPlugin()
   ],
   resolve: {
-    extensions: ['.js', '.json', '.node'],
-    modules: [
-      path.join(__dirname, 'app/node_modules')
-    ]
+    extensions: ['.js', '.json', '.node']
   },
   target: 'electron-main'
 }
 
+/**
+ * Adjust mainConfig for development settings
+ */
+if (process.env.NODE_ENV !== 'production') {
+  mainConfig.plugins.push(
+    new webpack.DefinePlugin({
+      '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
+    })
+  )
+}
+
+/**
+ * Adjust mainConfig for production settings
+ */
+if (process.env.NODE_ENV === 'production') {
+  mainConfig.plugins.push(
+    new BabiliWebpackPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    })
+  )
+}
+
 module.exports = mainConfig

.electron-vue/webpack.renderer.config.js

+'use strict'
+
+process.env.BABEL_ENV = 'renderer'
+
+const path = require('path')
+const { dependencies } = require('../package.json')
+const webpack = require('webpack')
+
+const BabiliWebpackPlugin = require('babili-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+/**
+ * List of node_modules to include in webpack bundle
+ *
+ * Required for specific packages like Vue UI libraries
+ * that provide pure *.vue files that need compiling
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
+ */
+let whiteListedModules = ['vue']
+
+let rendererConfig = {
+  devtool: '#cheap-module-eval-source-map',
+  entry: {
+    renderer: path.join(__dirname, '../src/renderer/main.js')
+  },
+  externals: [
+    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter')
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
+      },
+      {
+        test: /\.html$/,
+        use: 'vue-html-loader'
+      },
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.node$/,
+        use: 'node-loader'
+      },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            extractCSS: process.env.NODE_ENV === 'production',
+            loaders: {
+              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
+              scss: 'vue-style-loader!css-loader!sass-loader'
+            }
+          }
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'imgs/[name]--[folder].[ext]'
+          }
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'media/[name]--[folder].[ext]'
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'fonts/[name]--[folder].[ext]'
+          }
+        }
+      }
+    ]
+  },
+  node: {
+    __dirname: process.env.NODE_ENV !== 'production',
+    __filename: process.env.NODE_ENV !== 'production'
+  },
+  plugins: [
+    new ExtractTextPlugin('styles.css'),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: path.resolve(__dirname, '../src/index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true
+      },
+      nodeModules: process.env.NODE_ENV !== 'production'
+        ? path.resolve(__dirname, '../node_modules')
+        : false
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ],
+  output: {
+    filename: '[name].js',
+    libraryTarget: 'commonjs2',
+    path: path.join(__dirname, '../dist/electron')
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../src/renderer'),
+      'vue$': 'vue/dist/vue.esm.js'
+    },
+    extensions: ['.js', '.vue', '.json', '.css', '.node']
+  },
+  target: 'electron-renderer'
+}
+
+/**
+ * Adjust rendererConfig for development settings
+ */
+if (process.env.NODE_ENV !== 'production') {
+  rendererConfig.plugins.push(
+    new webpack.DefinePlugin({
+      '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
+    })
+  )
+}
+
+/**
+ * Adjust rendererConfig for production settings
+ */
+if (process.env.NODE_ENV === 'production') {
+  rendererConfig.devtool = ''
+
+  rendererConfig.plugins.push(
+    new BabiliWebpackPlugin(),
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../static'),
+        to: path.join(__dirname, '../dist/electron/static'),
+        ignore: ['.*']
+      }
+    ]),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"'
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  )
+}
+
+module.exports = rendererConfig

webpack.renderer.config.js → .electron-vue/webpack.web.config.js

 'use strict'
 
-process.env.BABEL_ENV = 'renderer'
+process.env.BABEL_ENV = 'web'
 
 const path = require('path')
-const pkg = require('./app/package.json')
-const settings = require('./config.js')
 const webpack = require('webpack')
-const config = require('./config/index.js')
 
+const BabiliWebpackPlugin = require('babili-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-const rendererConfig = {
-  devtool: '#eval-source-map',
-  devServer: { overlay: true },
+let webConfig = {
+  devtool: '#cheap-module-eval-source-map',
   entry: {
-    renderer: path.join(__dirname, 'app/src/renderer/main.js')
+    web: path.join(__dirname, '../src/renderer/main.js')
   },
-  externals: Object.keys(pkg.dependencies || {}),
   module: {
     rules: [
+      {
+        test: /\.(js|vue)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter')
+          }
+        }
+      },
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
@@ -34,22 +42,15 @@ const rendererConfig = {
       {
         test: /\.js$/,
         use: 'babel-loader',
-        include: [path.resolve(__dirname, 'app/src/renderer')],
+        include: [ path.resolve(__dirname, '../src/renderer') ],
         exclude: /node_modules/
       },
-      {
-        test: /\.json$/,
-        use: 'json-loader'
-      },
-      {
-        test: /\.node$/,
-        use: 'node-loader'
-      },
       {
         test: /\.vue$/,
         use: {
           loader: 'vue-loader',
           options: {
+            extractCSS: true,
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
               scss: 'vue-style-loader!css-loader!sass-loader'
@@ -83,77 +84,56 @@ const rendererConfig = {
     new ExtractTextPlugin('styles.css'),
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: './app/index.ejs',
-      appModules: process.env.NODE_ENV !== 'production'
-        ? path.resolve(__dirname, 'app/node_modules')
-        : false
+      template: path.resolve(__dirname, '../src/index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true
+      },
+      nodeModules: false
     }),
+    new webpack.DefinePlugin({
+      'process.env.IS_WEB': 'true'
+    }),
+    new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()
   ],
   output: {
     filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: path.join(__dirname, 'app/dist')
+    path: path.join(__dirname, '../dist/web')
   },
   resolve: {
     alias: {
-      components: path.join(__dirname, 'app/src/renderer/components'),
-      views: path.join(__dirname, 'app/src/renderer/views'),
-      renderer: path.join(__dirname, 'app/src/renderer'),
-      '@': path.join(__dirname, 'app/src/renderer')
+      '@': path.join(__dirname, '../src/renderer'),
+      'vue$': 'vue/dist/vue.esm.js'
     },
-    extensions: ['.js', '.vue', '.json', '.css', '.node'],
-    modules: [
-      path.join(__dirname, 'app/node_modules'),
-      path.join(__dirname, 'node_modules')
-    ]
+    extensions: ['.js', '.vue', '.json', '.css']
   },
-  target: 'electron-renderer'
-}
-
-if (process.env.NODE_ENV !== 'production') {
-  if (settings.eslint) {
-    rendererConfig.module.rules.push(
-      {
-        test: /\.(js|vue)$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
-        use: {
-          loader: 'eslint-loader',
-          options: {
-            formatter: require('eslint-friendly-formatter')
-          }
-        }
-      }
-    )
-  }
-  console.log(config.dev)
-  rendererConfig.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env': config.dev.env
-      })
-    )
+  target: 'web'
 }
 
 /**
- * Adjust rendererConfig for production settings
+ * Adjust webConfig for production settings
  */
 if (process.env.NODE_ENV === 'production') {
-  rendererConfig.devtool = ''
+  webConfig.devtool = ''
 
-  rendererConfig.plugins.push(
+  webConfig.plugins.push(
+    new BabiliWebpackPlugin(),
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../static'),
+        to: path.join(__dirname, '../dist/web/static'),
+        ignore: ['.*']
+      }
+    ]),
     new webpack.DefinePlugin({
-      'process.env': config.build.env
+      'process.env.NODE_ENV': '"production"'
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
     })
   )
 }
 
-module.exports = rendererConfig
+module.exports = webConfig

.eslintignore

-app/node_modules/**
-app/dist/**
 build/*.js
-config/*.js
-app/src/renderer/assets
+src/renderer/assets/**
+dist/**

.gitignore

 .DS_Store
-app/dist/index.html
-app/dist/main.js
-app/dist/renderer.js
-app/dist/styles.css
-builds/*
-dist/*
+dist/electron/*
+dist/web/*
+build/*
+!build/icons
 node_modules/
 npm-debug.log
 npm-debug.log.*

.travis.yml

+osx_image: xcode8.3
+sudo: required
+dist: trusty
+language: c
+matrix:
+  include:
+  - os: osx
+  - os: linux
+    env: CC=clang CXX=clang++ npm_config_clang=1
+    compiler: clang
+cache:
+  directories:
+  - node_modules
+  - "$HOME/.electron"
+  - "$HOME/.cache"
+addons:
+  apt:
+    packages:
+    - libgnome-keyring-dev
+    - icnsutils
+before_install:
+- mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
+  "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
+  | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
+- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
+install:
+- nvm install 7
+- curl -o- -L https://yarnpkg.com/install.sh | bash
+- source ~/.bashrc
+- npm install -g xvfb-maybe
+- yarn
+script:
+- yarn run build
+branches:
+  only:
+  - master

README.md

-# electron-vue-admin
+# my-project
 
 > An electron-vue project
 
-This is a vue electron admin project base on  [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) , and was generated from [electron-vue](https://github.com/SimulatedGREG/electron-vue) using [vue-cli](https://github.com/vuejs/vue-cli). Documentation about this project can be found [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
-
-## Build Setup
+#### Build Setup
 
 ``` bash
 # install dependencies
@@ -13,20 +11,15 @@ npm install
 # serve with hot reload at localhost:9080
 npm run dev
 
-# build electron app for production
+# build electron application for production
 npm run build
 
-# lint all JS/Vue component files in `app/src`
+
+# lint all JS/Vue component files in `src/`
 npm run lint
 
-# run webpack in production
-npm run pack
 ```
----
 
+---
 
-## Demo
-
-![](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/electron-login.png)
-
-![](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/electron-admin.gif)
+This project was generated with [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[7c4e3e9](https://github.com/SimulatedGREG/electron-vue/tree/7c4e3e90a772bd4c27d2dd4790f61f09bae0fcef) 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).

app/dist/1.js

-webpackJsonp([1],{141:function(t,o,n){n(162);var i=n(2)(n(148),n(158),null,null);t.exports=i.exports},145:function(t,o,n){"use strict";function i(t){return/^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i.test(t.trim())}o.a=i},148:function(t,o,n){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var i=n(145);o.default={name:"login",data:function(){return{loginForm:{email:"admin@wallstreetcn.com",password:"111111"},loginRules:{email:[{required:!0,trigger:"blur",validator:function(t,o,e){n.i(i.a)(o)?e():e(new Error("请输入正确的合法邮箱"))}}],password:[{required:!0,trigger:"blur",validator:function(t,o,n){o.length<6?n(new Error("密码不能小于6位")):n()}}]},loading:!1}},methods:{handleLogin:function(){var t=this;this.$refs.loginForm.validate(function(o){if(!o)return console.log("error submit!!"),!1;t.loading=!0,t.$store.dispatch("Login",t.loginForm).then(function(){t.loading=!1,t.$router.push({path:"/"})}).catch(function(){t.loading=!1})})}}}},152:function(t,o,n){o=t.exports=n(3)(),o.push([t.i,".tips{font-size:14px;color:#fff;margin-bottom:5px}.login-container{position:relative;width:100%;height:100%;height:100vh;background-color:#2d3a4b}.login-container input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #293444 inset!important;-webkit-text-fill-color:#fff!important}.login-container input{background:transparent;border:0;-webkit-appearance:none;border-radius:0;padding:12px 5px 12px 15px;color:#eee;height:47px}.login-container .el-input{display:inline-block;height:47px;width:85%}.login-container .svg-container{padding:6px 5px 6px 15px;color:#889aa4}.login-container .title{font-size:26px;font-weight:400;color:#eee;margin:0 auto 40px;text-align:center;font-weight:700}.login-container .login-form{position:absolute;left:0;right:0;width:400px;padding:35px 35px 15px;margin:120px auto}.login-container .el-form-item{border:1px solid hsla(0,0%,100%,.1);background:rgba(0,0,0,.1);border-radius:5px;color:#454545}.login-container .forget-pwd{color:#fff}",""])},158:function(t,o){t.exports={render:function(){var t=this,o=t.$createElement,n=t._self._c||o;return n("div",{staticClass:"login-container"},[n("el-form",{ref:"loginForm",staticClass:"card-box login-form",attrs:{autoComplete:"on",model:t.loginForm,rules:t.loginRules,"label-position":"left","label-width":"0px"}},[n("h3",{staticClass:"title"},[t._v("系统登录")]),t._v(" "),n("el-form-item",{attrs:{prop:"email"}},[n("span",{staticClass:"svg-container"},[n("icon-svg",{attrs:{"icon-class":"jiedianyoujian"}})],1),t._v(" "),n("el-input",{attrs:{name:"email",type:"text",autoComplete:"on",placeholder:"邮箱"},model:{value:t.loginForm.email,callback:function(o){t.loginForm.email=o},expression:"loginForm.email"}})],1),t._v(" "),n("el-form-item",{attrs:{prop:"password"}},[n("span",{staticClass:"svg-container"},[n("icon-svg",{attrs:{"icon-class":"mima"}})],1),t._v(" "),n("el-input",{attrs:{name:"password",type:"password",autoComplete:"on",placeholder:"密码"},nativeOn:{keyup:function(o){if(!("button"in o)&&t._k(o.keyCode,"enter",13))return null;t.handleLogin(o)}},model:{value:t.loginForm.password,callback:function(o){t.loginForm.password=o},expression:"loginForm.password"}})],1),t._v(" "),n("el-form-item",[n("el-button",{staticStyle:{width:"100%"},attrs:{type:"primary",loading:t.loading},nativeOn:{click:function(o){o.preventDefault(),t.handleLogin(o)}}},[t._v("\n        登录\n      ")])],1),t._v(" "),n("div",{staticClass:"tips"},[t._v("admin账号为:admin@wallstreetcn.com 密码随便填")]),t._v(" "),n("div",{staticClass:"tips"},[t._v("editor账号:editor@wallstreetcn.com 密码随便填")])],1)],1)},staticRenderFns:[]}},162:function(t,o,n){var i=n(152);"string"==typeof i&&(i=[[t.i,i,""]]),n(4)(i,{}),i.locals&&(t.exports=i.locals)}});
\ No newline at end of file

app/dist/2.js

-webpackJsonp([2],{140:function(e,t,n){n(163);var s=n(2)(n(147),n(160),null,null);e.exports=s.exports},147:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var s=n(10),a=n.n(s),r=n(17);n.n(r),t.default={name:"dashboard",computed:a()({},n.i(r.mapGetters)(["name","roles"]))}},153:function(e,t,n){t=e.exports=n(3)(),t.push([e.i,".dashboard-container{margin:30px}.dashboard-text{font-size:30px;line-height:46px}",""])},160:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"dashboard-container"},[n("div",{staticClass:"dashboard-text"},[e._v("name:"+e._s(e.name))]),e._v(" "),n("div",{staticClass:"dashboard-text"},[e._v("role:"),e._l(e.roles,function(t){return n("span",{key:t},[e._v(e._s(t))])})],2)])},staticRenderFns:[]}},163:function(e,t,n){var s=n(153);"string"==typeof s&&(s=[[e.i,s,""]]),n(4)(s,{}),s.locals&&(e.exports=s.locals)}});
\ No newline at end of file

app/dist/3.js

-webpackJsonp([3],{143:function(t,e,n){var a=n(2)(n(150),n(157),null,null);t.exports=a.exports},144:function(t,e,n){"use strict";function a(t){return n.i(i.a)({url:"/table/list",method:"get",params:t})}e.a=a;var i=n(56)},150:function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=n(144);e.default={data:function(){return{list:null,listLoading:!0}},created:function(){this.fetchData()},methods:{fetchData:function(){var t=this;this.listLoading=!0,n.i(a.a)(this.listQuery).then(function(e){t.list=e.data.items,t.listLoading=!1})}}}},157:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"app-container"},[n("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:t.listLoading,expression:"listLoading",modifiers:{body:!0}}],attrs:{data:t.list,"element-loading-text":"拼命加载中",border:"",fit:"","highlight-current-row":""}},[n("el-table-column",{attrs:{align:"center",label:"ID",width:"95"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v("\n        "+t._s(e.$index)+"\n      ")]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Title"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v("\n        "+t._s(e.row.title)+"\n      ")]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Author",width:"110",align:"center"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("span",[t._v(t._s(e.row.author))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Pageviews",width:"110",align:"center"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v("\n        "+t._s(e.row.pageviews)+"\n      ")]}}])}),t._v(" "),n("el-table-column",{attrs:{align:"center",prop:"created_at",label:"Display_time",width:"200"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("i",{staticClass:"el-icon-time"}),t._v(" "),n("span",[t._v(t._s(e.row.display_time))])]}}])})],1)],1)},staticRenderFns:[]}}});
\ No newline at end of file

app/dist/4.js

-webpackJsonp([4],{142:function(e,t,l){var a=l(2)(l(149),l(159),null,null);e.exports=a.exports},149:function(e,t,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}}},159:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("div",{staticClass:"app-container"},[l("el-form",{ref:"form",attrs:{model:e.form,"label-width":"80px"}},[l("el-form-item",{attrs:{label:"活动名称"}},[l("el-input",{model:{value:e.form.name,callback:function(t){e.form.name=t},expression:"form.name"}})],1),e._v(" "),l("el-form-item",{attrs:{label:"活动区域"}},[l("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:e.form.region,callback:function(t){e.form.region=t},expression:"form.region"}},[l("el-option",{attrs:{label:"区域一",value:"shanghai"}}),e._v(" "),l("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),e._v(" "),l("el-form-item",{attrs:{label:"活动时间"}},[l("el-col",{attrs:{span:11}},[l("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:e.form.date1,callback:function(t){e.form.date1=t},expression:"form.date1"}})],1),e._v(" "),l("el-col",{staticClass:"line",attrs:{span:2}},[e._v("-")]),e._v(" "),l("el-col",{attrs:{span:11}},[l("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:e.form.date2,callback:function(t){e.form.date2=t},expression:"form.date2"}})],1)],1),e._v(" "),l("el-form-item",{attrs:{label:"即时配送"}},[l("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:e.form.delivery,callback:function(t){e.form.delivery=t},expression:"form.delivery"}})],1),e._v(" "),l("el-form-item",{attrs:{label:"活动性质"}},[l("el-checkbox-group",{model:{value:e.form.type,callback:function(t){e.form.type=t},expression:"form.type"}},[l("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),e._v(" "),l("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),e._v(" "),l("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),e._v(" "),l("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),e._v(" "),l("el-form-item",{attrs:{label:"特殊资源"}},[l("el-radio-group",{model:{value:e.form.resource,callback:function(t){e.form.resource=t},expression:"form.resource"}},[l("el-radio",{attrs:{label:"线上品牌商赞助"}}),e._v(" "),l("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),e._v(" "),l("el-form-item",{attrs:{label:"活动形式"}},[l("el-input",{attrs:{type:"textarea"},model:{value:e.form.desc,callback:function(t){e.form.desc=t},expression:"form.desc"}})],1),e._v(" "),l("el-form-item",[l("el-button",{attrs:{type:"primary"},on:{click:e.onSubmit}},[e._v("立即创建")]),e._v(" "),l("el-button",[e._v("取消")])],1)],1)],1)},staticRenderFns:[]}}});
\ No newline at end of file

app/package.json

-{
-  "name": "electron-vue-admin",
-  "version": "0.0.0",
-  "description": "An electron-vue project",
-  "main": "./dist/main.js",
-  "dependencies": {
-    "axios": "^0.16.2",
-    "babel-runtime": "6.23.0",
-    "element-ui": "1.3.4",
-    "normalize.css": "3.0.2",
-    "vue": "2.3.3",
-    "vue-electron": "1.0.6",
-    "vue-router": "2.5.3",
-    "vuex": "2.3.1"
-  },
-  "devDependencies": {},
-  "author": "Pan <panfree23@gmail.com>"
-}

app/src/renderer/api/login.js

-import fetch from '@/utils/fetch';
-
-export function login(email, password) {
-  return fetch({
-    url: '/user/login',
-    method: 'post',
-    data: {
-      email,
-      password
-    }
-  });
-}
-
-export function getInfo(token) {
-  return fetch({
-    url: '/user/info',
-    method: 'get',
-    params: { token }
-  });
-}
-
-export function logout() {
-  return fetch({
-    url: '/user/logout',
-    method: 'post'
-  });
-}
-
-
-

app/src/renderer/api/table.js

-import fetch from '@/utils/fetch';
-
-export function getList(params) {
-  return fetch({
-    url: '/table/list',
-    method: 'get',
-    params
-  });
-}
-
-

app/src/renderer/components/Hamburger/index.vue

-<template>
-    <div>
-        <svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
-            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
-            height="64">
-            <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
-                p-id="1692"></path>
-            <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
-                p-id="1693"></path>
-            <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
-                p-id="1694"></path>
-        </svg>
-    </div>
-</template>
-
-<script>
-    export default {
-      name: 'hamburger',
-      props: {
-        isActive: {
-          type: Boolean,
-          default: false
-        },
-        toggleClick: {
-          type: Function,
-          default: null
-        }
-      }
-    }
-</script>
-
-<style scoped>
-.hamburger {
-    display: inline-block;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    transform: rotate(0deg);
-    transition: .38s;
-    transform-origin: 50% 50%;
-}
-
-.hamburger.is-active {
-    transform: rotate(90deg);
-}
-</style>

app/src/renderer/components/Icon-svg/index.vue

-<template>
-  <svg class="svg-icon" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script>
-  export default {
-    name: 'icon-svg',
-    props: {
-      iconClass: {
-        type: String,
-        required: true
-      }
-    },
-    computed: {
-      iconName() {
-        return `#icon-${this.iconClass}`
-      }
-    }
-  }
-</script>

app/src/renderer/main.js

-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import Electron from 'vue-electron'
-import App from './App'
-import router from './router'
-import store from './store'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
-// import NProgress from 'nprogress'
-import 'normalize.css/normalize.css'
-import '@/assets/iconfont/iconfont'
-import IconSvg from '@/components/Icon-svg/index.vue'
-
-Vue.config.productionTip = false
-
-Vue.use(ElementUI)
-Vue.use(Electron)
-Vue.component('icon-svg', IconSvg)
-
-const whiteList = ['/login'];
-router.beforeEach((to, from, next) => {
-  // NProgress.start();
-  if (store.getters.token) {
-    if (to.path === '/login') {
-      next({ path: '/' });
-    } else {
-      if (store.getters.roles.length === 0) {
-        store.dispatch('GetInfo').then(res => {
-          const roles = res.data.role;
-          store.dispatch('GenerateRoutes', { roles }).then(() => {
-            router.addRoutes(store.getters.addRouters);
-            next({ ...to });
-          })
-        })
-      } else {
-        next();
-      }
-    }
-  } else {
-    if (whiteList.indexOf(to.path) !== -1) {
-      next()
-    } else {
-      next('/login');
-      // NProgress.done();
-    }
-  }
-});
-
-router.afterEach(() => {
-  // NProgress.done();
-});
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app');

app/src/renderer/router/_import_development.js

-module.exports = file => require('@/views/' + file + '.vue')

app/src/renderer/router/_import_production.js

-module.exports = file => () => import('@/views/' + file + '.vue')

app/src/renderer/router/index.js

-import Vue from 'vue';
-import Router from 'vue-router';
-const _import = require('./_import_' + process.env.NODE_ENV);
-// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
-
-/* layout */
-import Layout from '../views/layout/Layout';
-
-/* login */
-const Login = _import('login/index');
-
-/* dashboard */
-const dashboard = _import('dashboard/index');
-
-/* error page */
-const Err404 = _import('404');
-
-/* demo page */
-const Form = _import('page/form');
-const Table = _import('table/index');
-
-Vue.use(Router);
-
- /**
-  * icon : the icon show in the sidebar
-  * hidden : if `hidden:true` will not show in the sidebar
-  * redirect : if `redirect:noredirect` will not redirct in the levelbar
-  * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
-  * meta : `{ role: ['admin'] }`  will control the page role
-  **/
-export const constantRouterMap = [
-  { path: '/login', component: Login, hidden: true },
-  { path: '/404', component: Err404, hidden: true },
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    name: 'Home',
-    hidden: true,
-    children: [{ path: 'dashboard', component: dashboard }]
-  }
-]
-
-export default new Router({
-  // mode: 'history', //后端支持可开
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRouterMap
-});
-
-export const asyncRouterMap = [
-  {
-    path: '/example',
-    component: Layout,
-    redirect: 'noredirect',
-    name: 'Example',
-    icon: 'zujian',
-    children: [
-      { path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
-    ]
-  },
-
-  {
-    path: '/table',
-    component: Layout,
-    redirect: '/table/index',
-    name: 'Table',
-    icon: 'tubiaoleixingzhengchang',
-    noDropdown: true,
-    children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
-  },
-
-  { path: '*', redirect: '/404', hidden: true }
-];

app/src/renderer/store/getters.js

-const getters = {
-  sidebar: state => state.app.sidebar,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  roles: state => state.user.roles,
-  permission_routers: state => state.permission.routers,
-  addRouters: state => state.permission.addRouters
-};
-export default getters

app/src/renderer/store/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import app from './modules/app';
-import user from './modules/user';
-import permission from './modules/permission';
-import getters from './getters';
-
-Vue.use(Vuex);
-
-const store = new Vuex.Store({
-  modules: {
-    app,
-    user,
-    permission
-  },
-  getters
-});
-
-export default store

app/src/renderer/store/modules/app.js

-// import Cookies from 'js-cookie';
-
-const app = {
-  state: {
-    sidebar: {
-      opened: false
-    }
-  },
-  mutations: {
-    TOGGLE_SIDEBAR: state => {
-      if (state.sidebar.opened) {
-        // Cookies.set('sidebarStatus', 1);
-      } else {
-        // Cookies.set('sidebarStatus', 0);
-      }
-      state.sidebar.opened = !state.sidebar.opened;
-    }
-  },
-  actions: {
-    ToggleSideBar: ({ commit }) => {
-      commit('TOGGLE_SIDEBAR')
-    }
-  }
-};
-
-export default app;

app/src/renderer/store/modules/permission.js

-import { asyncRouterMap, constantRouterMap } from '@/router/index';
-
-/**
- * 通过meta.role判断是否与当前用户权限匹配
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.role) {
-    return roles.some(role => route.meta.role.indexOf(role) >= 0)
-  } else {
-    return true
-  }
-}
-
-/**
- * 递归过滤异步路由表，返回符合用户角色权限的路由表
- * @param asyncRouterMap
- * @param roles
- */
-function filterAsyncRouter(asyncRouterMap, roles) {
-  const accessedRouters = asyncRouterMap.filter(route => {
-    if (hasPermission(roles, route)) {
-      if (route.children && route.children.length) {
-        route.children = filterAsyncRouter(route.children, roles)
-      }
-      return true
-    }
-    return false
-  })
-  return accessedRouters
-}
-
-const permission = {
-  state: {
-    routers: constantRouterMap,
-    addRouters: []
-  },
-  mutations: {
-    SET_ROUTERS: (state, routers) => {
-      state.addRouters = routers;
-      state.routers = constantRouterMap.concat(routers);
-    }
-  },
-  actions: {
-    GenerateRoutes({ commit }, data) {
-      return new Promise(resolve => {
-        const { roles } = data
-        let accessedRouters
-        if (roles.indexOf('admin') >= 0) {
-          accessedRouters = asyncRouterMap
-        } else {
-          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
-        }
-        commit('SET_ROUTERS', accessedRouters);
-        resolve();
-      })
-    }
-  }
-};
-
-export default permission;

app/src/renderer/store/modules/user.js

-import { login, logout, getInfo } from '@/api/login';
-
-const user = {
-  state: {
-    token: '',
-    name: '',
-    avatar: '',
-    roles: []
-  },
-
-  mutations: {
-    SET_TOKEN: (state, token) => {
-      state.token = token;
-    },
-    SET_NAME: (state, name) => {
-      state.name = name;
-    },
-    SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar;
-    },
-    SET_ROLES: (state, roles) => {
-      state.roles = roles;
-    }
-  },
-
-  actions: {
-    // 登录
-    Login({ commit }, userInfo) {
-      const email = userInfo.email.trim();
-      return new Promise((resolve, reject) => {
-        login(email, userInfo.password).then(response => {
-          const data = response.data;
-          window.localStorage.setItem('Admin-Token', data.token);
-          commit('SET_TOKEN', data.token);
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
-      });
-    },
-
-
-    // 获取用户信息
-    GetInfo({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        getInfo(state.token).then(response => {
-          const data = response.data;
-          commit('SET_ROLES', data.role);
-          commit('SET_NAME', data.name);
-          commit('SET_AVATAR', data.avatar);
-          resolve(response);
-        }).catch(error => {
-          reject(error);
-        });
-      });
-    },
-
-    // 登出
-    LogOut({ commit, state }) {
-      return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '');
-          commit('SET_ROLES', []);
-          Cookies.remove('Admin-Token');
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
-      });
-    },
-
-    // 前端 登出
-    FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '');
-        Cookies.remove('Admin-Token');
-        resolve();
-      });
-    }
-  }
-};
-
-export default user;

app/src/renderer/styles/element-ui.scss

- //覆盖一些element-ui样式 覆盖css样式可在这里添加
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-//element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}

app/src/renderer/styles/index.scss

-@import './element-ui.scss';
-@import './mixin.scss';
-body {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
-//vue router transition css
-.fade-enter-active,
-.fade-leave-active {
-  transition: all .2s ease
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-//main-container全局样式
-.app-main{
-  min-height: 100%
-}
-
-.app-container {
-  padding: 20px;
-}
-
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-

app/src/renderer/styles/mixin.scss

-@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin scrollBar {
-  &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
-  }
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
-    border-radius: 20px;
-  }
-}
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-

app/src/renderer/utils/fetch.js

-import axios from 'axios';
-import { Message } from 'element-ui';
-import store from '../store';
-
-console.log(process.env)
-
-// 创建axios实例
-const service = axios.create({
-  baseURL: process.env.BASE_API, // api的base_url
-  timeout: 5000                  // 请求超时时间
-});
-
-// request拦截器
-service.interceptors.request.use(config => {
-  if (store.getters.token) {
-    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  return config;
-}, error => {
-  // Do something with request error
-  console.log(error); // for debug
-  Promise.reject(error);
-})
-
-// respone拦截器
-service.interceptors.response.use(
-  response => {
-  /**
-  * code为非20000是抛错 可结合自己业务进行修改
-  */
-    const res = response.data;
-    if (res.code !== 20000) {
-      Message({
-        message: res.data,
-        type: 'error',
-        duration: 5 * 1000
-      });
-
-      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload();// 为了重新实例化vue-router对象 避免bug
-          });
-        })
-      }
-      return Promise.reject(error);
-    } else {
-      return response.data;
-    }
-  },
-  error => {
-    console.log('err' + error);// for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    });
-    return Promise.reject(error);
-  }
-)
-
-export default service;

app/src/renderer/utils/index.js

-/**
- * Created by jiachenpan on 16/11/18.
- */
-
- export function parseTime(time, cFormat) {
-   if (arguments.length === 0) {
-     return null;
-   }
-   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
-   let date;
-   if (typeof time == 'object') {
-     date = time;
-   } else {
-     if (('' + time).length === 10) time = parseInt(time) * 1000;
-     date = new Date(time);
-   }
-   const formatObj = {
-     y: date.getFullYear(),
-     m: date.getMonth() + 1,
-     d: date.getDate(),
-     h: date.getHours(),
-     i: date.getMinutes(),
-     s: date.getSeconds(),
-     a: date.getDay()
-   };
-   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-     let value = formatObj[key];
-     if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
-     if (result.length > 0 && value < 10) {
-       value = '0' + value;
-     }
-     return value || 0;
-   });
-   return time_str;
- }
-
- export function formatTime(time, option) {
-   time = +time * 1000;
-   const d = new Date(time);
-   const now = Date.now();
-
-   const diff = (now - d) / 1000;
-
-   if (diff < 30) {
-     return '刚刚'
-   } else if (diff < 3600) { // less 1 hour
-     return Math.ceil(diff / 60) + '分钟前'
-   } else if (diff < 3600 * 24) {
-     return Math.ceil(diff / 3600) + '小时前'
-   } else if (diff < 3600 * 24 * 2) {
-     return '1天前'
-   }
-   if (option) {
-     return parseTime(time, option)
-   } else {
-     return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
-   }
- }

app/src/renderer/utils/validate.js

-/**
- * Created by jiachenpan on 16/11/18.
- */
-
-/* 是否是公司邮箱*/
-export function isWscnEmail(str) {
-  const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i;
-  return reg.test(str.trim());
-}
-
-/* 合法uri*/
-export function validateURL(textval) {
-  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
-  return urlregex.test(textval);
-}
-
-/* 小写字母*/
-export function validateLowerCase(str) {
-  const reg = /^[a-z]+$/;
-  return reg.test(str);
-}
-
-/* 大写字母*/
-export function validateUpperCase(str) {
-  const reg = /^[A-Z]+$/;
-  return reg.test(str);
-}
-
-/* 大小写字母*/
-export function validatAlphabets(str) {
-  const reg = /^[A-Za-z]+$/;
-  return reg.test(str);
-}
-
-

app/src/renderer/views/404.vue

-<template>
-  <div style="background:#f0f2f5;margin-top: -20px;">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" :src="img_404" alt="404">
-        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
-        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
-        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-        <a href="/" class="bullshit__return-home">返回首页</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
- import img_404 from '@/assets/404_images/404.png'
- import img_404_cloud from '@/assets/404_images/404_cloud.png'
-
- export default {
-   data() {
-     return {
-       img_404,
-       img_404_cloud
-     }
-   },
-   computed: {
-     message() {
-       return '特朗普说这个页面你不能进......'
-     }
-   }
- }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
-    padding: 150px 0;
-    overflow: hidden;
-    &__parent {
-      width: 100%;
-    }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
-  }
-  .bullshit {
-    position: relative;
-    float: left;
-    width: 300px;
-    padding: 150px 0;
-    overflow: hidden;
-    &__oops {
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      margin-bottom: 20px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-    &__headline {
-      font-size: 20px;
-      line-height: 24px;
-      color: #1482f0;
-      opacity: 0;
-      margin-bottom: 10px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-    &__info {
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      margin-bottom: 30px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-    &__return-home {
-      display: block;
-      float: left;
-      width: 110px;
-      height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
-      text-align: center;
-      color: #ffffff;
-      opacity: 0;
-      font-size: 14px;
-      line-height: 36px;
-      cursor: pointer;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
-    }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-  }
-}
-
-</style>

app/src/renderer/views/dashboard/index.vue

-<template>
-  <div class="dashboard-container">
-    <div class='dashboard-text'>name:{{name}}</div>
-    <div class='dashboard-text'>role:<span v-for='role in roles' :key='role'>{{role}}</span></div>
-  </div>
-</template>
-
-<script>
-    import { mapGetters } from 'vuex';
-    export default {
-      name: 'dashboard',
-      computed: {
-        ...mapGetters([
-          'name',
-          'roles'
-        ])
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>

app/src/renderer/views/layout/AppMain.vue

-<template>
-    <section class="app-main">
-        <transition name="fade" mode="out-in">
-            <router-view :key="key"></router-view>
-        </transition>
-    </section>
-</template>
-
-<script>
-    export default {
-      name: 'AppMain',
-      computed: {
-        key() {
-          return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-        }
-      }
-    }
-</script>

app/src/renderer/views/layout/Layout.vue

-<template>
-    <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
-        <div class="sidebar-wrapper">
-            <sidebar class="sidebar-container"></sidebar>
-        </div>
-        <div class="main-container">
-            <navbar></navbar>
-            <app-main></app-main>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { Navbar, Sidebar, AppMain } from '@/views/layout';
-
-    export default {
-      name: 'layout',
-      components: {
-        Navbar,
-        Sidebar,
-        AppMain
-      },
-      computed: {
-        sidebar() {
-          return this.$store.state.app.sidebar;
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    @import "../../styles/mixin.scss";
-    .app-wrapper {
-        @include clearfix;
-        position: relative;
-        height: 100%;
-        width: 100%;
-        &.hideSidebar {
-            .sidebar-wrapper {
-                transform: translate(-140px, 0);
-                .sidebar-container {
-                    transform: translate(132px, 0);
-                }
-                &:hover {
-                    transform: translate(0, 0);
-                    .sidebar-container {
-                        transform: translate(0, 0);
-                    }
-                }
-            }
-            .main-container {
-                margin-left: 40px;
-            }
-        }
-        .sidebar-wrapper {
-            width: 180px;
-            position: fixed;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 1001;
-            overflow: hidden;
-            transition: all .28s ease-out;
-        }
-        .sidebar-container {
-            transition: all .28s ease-out;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: -17px;
-            overflow-y: scroll;
-        }
-        .main-container {
-            min-height: 100%;
-            transition: all .28s ease-out;
-            margin-left: 180px;
-        }
-    }
-</style>

app/src/renderer/views/layout/Levelbar.vue

-<template>
-  <el-breadcrumb class="app-levelbar" separator="/">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item">
-      <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
-      <router-link v-else :to="item.path">{{item.name}}</router-link>
-    </el-breadcrumb-item>
-  </el-breadcrumb>
-</template>
-
-<script>
-    export default {
-      created() {
-        this.getBreadcrumb()
-      },
-      data() {
-        return {
-          levelList: null
-        }
-      },
-      methods: {
-        getBreadcrumb() {
-          let matched = this.$route.matched.filter(item => item.name);
-          const first = matched[0];
-          if (first && (first.name !== '首页' || first.path !== '')) {
-            matched = [{ name: '首页', path: '/' }].concat(matched)
-          }
-          this.levelList = matched;
-        }
-      },
-      watch: {
-        $route() {
-          this.getBreadcrumb();
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .app-levelbar.el-breadcrumb {
-      display: inline-block;
-      font-size: 14px;
-      line-height: 50px;
-      margin-left: 10px;
-      .no-redirect {
-        color: #97a8be;
-        cursor: text;
-      }
-    }
-</style>

app/src/renderer/views/layout/Navbar.vue

-<template>
-    <el-menu class="navbar" mode="horizontal">
-        <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
-        <levelbar></levelbar>
-        <el-dropdown class="avatar-container" trigger="click">
-            <div class="avatar-wrapper">
-                <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-                <i class="el-icon-caret-bottom"></i>
-            </div>
-            <el-dropdown-menu class="user-dropdown" slot="dropdown">
-                <router-link class='inlineBlock' to="/">
-                    <el-dropdown-item>
-                        Home
-                    </el-dropdown-item>
-                </router-link>
-                <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
-            </el-dropdown-menu>
-        </el-dropdown>
-    </el-menu>
-</template>
-
-<script>
-    import { mapGetters } from 'vuex';
-    import Levelbar from './Levelbar';
-    import Hamburger from '@/components/Hamburger';
-
-    export default {
-      components: {
-        Levelbar,
-        Hamburger
-      },
-      computed: {
-        ...mapGetters([
-          'sidebar',
-          'avatar'
-        ])
-      },
-      methods: {
-        toggleSideBar() {
-          this.$store.dispatch('ToggleSideBar')
-        },
-        logout() {
-          this.$store.dispatch('LogOut').then(() => {
-            location.reload();  // 为了重新实例化vue-router对象 避免bug
-          });
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .navbar {
-        height: 50px;
-        line-height: 50px;
-        border-radius: 0px !important;
-        .hamburger-container {
-            line-height: 58px;
-            height: 50px;
-            float: left;
-            padding: 0 10px;
-        }
-        .errLog-container {
-            display: inline-block;
-            position: absolute;
-            right: 150px;
-        }
-        .screenfull {
-            position: absolute;
-            right: 90px;
-            top: 16px;
-            color: red;
-        }
-        .avatar-container {
-            height: 50px;
-            display: inline-block;
-            position: absolute;
-            right: 35px;
-            .avatar-wrapper {
-                cursor: pointer;
-                margin-top: 5px;
-                position: relative;
-                .user-avatar {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 10px;
-                }
-                .el-icon-caret-bottom {
-                    position: absolute;
-                    right: -20px;
-                    top: 25px;
-                    font-size: 12px;
-                }
-            }
-        }
-    }
-</style>
-
-
-

app/src/renderer/views/layout/Sidebar.vue

-<template>
-    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
-        <sidebar-item :routes='permission_routers'></sidebar-item>
-    </el-menu>
-</template>
-
-<script>
-    import { mapGetters } from 'vuex';
-    import SidebarItem from './SidebarItem';
-    export default {
-      components: { SidebarItem },
-      computed: {
-        ...mapGetters([
-          'permission_routers'
-        ])
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.el-menu {
-    min-height: 100%;
-}
-
-</style>

app/src/renderer/views/layout/SidebarItem.vue

-<template>
-    <div>
-        <template v-for="item in routes">
-            <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
-                <el-menu-item :index="item.path+'/'+item.children[0].path">
-                    <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
-                </el-menu-item>
-            </router-link>
-            <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
-                <template slot="title">
-                    <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
-                </template>
-                <template v-for="child in item.children" v-if='!child.hidden'>
-                    <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
-                    <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
-                        <el-menu-item :index="item.path+'/'+child.path">
-                            {{child.name}}
-                        </el-menu-item>
-                    </router-link>
-                </template>
-            </el-submenu>
-        </template>
-    </div>
-</template>
-
-<script>
-    export default {
-      name: 'SidebarItem',
-      props: {
-        routes: {
-          type: Array
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .svg-icon {
-        margin-right: 10px;
-    }
-    .hideSidebar .menu-indent{
-        display: block;
-        text-indent: 10px;
-    }
-</style>
-

app/src/renderer/views/layout/index.js

-export { default as Navbar } from './Navbar';
-
-export { default as Sidebar } from './Sidebar';
-
-export { default as Levelbar } from './Levelbar';
-
-export { default as AppMain } from './AppMain';

app/src/renderer/views/login/index.vue

-<template>
-  <div class="login-container">
-    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
-      class="card-box login-form">
-      <h3 class="title">系统登录</h3>
-      <el-form-item prop="email">
-        <span class="svg-container">
-                  <icon-svg icon-class="jiedianyoujian"></icon-svg>
-                </span>
-        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <span class="svg-container">
-                  <icon-svg icon-class="mima" ></icon-svg>
-                </span>
-        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-          placeholder="密码"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
-          登录
-        </el-button>
-      </el-form-item>
-      <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
-      <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-    import { isWscnEmail } from '@/utils/validate';
-
-    export default {
-      name: 'login',
-      data() {
-        const validateEmail = (rule, value, callback) => {
-          if (!isWscnEmail(value)) {
-            callback(new Error('请输入正确的合法邮箱'));
-          } else {
-            callback();
-          }
-        };
-        const validatePass = (rule, value, callback) => {
-          if (value.length < 6) {
-            callback(new Error('密码不能小于6位'));
-          } else {
-            callback();
-          }
-        };
-        return {
-          loginForm: {
-            email: 'admin@wallstreetcn.com',
-            password: '111111'
-          },
-          loginRules: {
-            email: [
-                { required: true, trigger: 'blur', validator: validateEmail }
-            ],
-            password: [
-                { required: true, trigger: 'blur', validator: validatePass }
-            ]
-          },
-          loading: false
-        }
-      },
-      methods: {
-        handleLogin() {
-          this.$refs.loginForm.validate(valid => {
-            if (valid) {
-              this.loading = true;
-              this.$store.dispatch('Login', this.loginForm).then(() => {
-                this.loading = false;
-                this.$router.push({ path: '/' });
-              }).catch(() => {
-                this.loading = false;
-              });
-            } else {
-              console.log('error submit!!');
-              return false;
-            }
-          });
-        }
-      }
-    }
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-    @import "../../styles/mixin.scss";
-    .tips {
-      font-size: 14px;
-      color: #fff;
-      margin-bottom: 5px;
-    }
-
-    .login-container {
-      @include relative;
-      height: 100vh;
-      background-color: #2d3a4b;
-      input:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-        -webkit-text-fill-color: #fff !important;
-      }
-      input {
-        background: transparent;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        padding: 12px 5px 12px 15px;
-        color: #eeeeee;
-        height: 47px;
-      }
-      .el-input {
-        display: inline-block;
-        height: 47px;
-        width: 85%;
-      }
-      .svg-container {
-        padding: 6px 5px 6px 15px;
-        color: #889aa4;
-      }
-      .title {
-        font-size: 26px;
-        font-weight: 400;
-        color: #eeeeee;
-        margin: 0px auto 40px auto;
-        text-align: center;
-        font-weight: bold;
-      }
-      .login-form {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 400px;
-        padding: 35px 35px 15px 35px;
-        margin: 120px auto;
-      }
-      .el-form-item {
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: rgba(0, 0, 0, 0.1);
-        border-radius: 5px;
-        color: #454545;
-      }
-      .forget-pwd {
-        color: #fff;
-      }
-    }
-</style>

app/src/renderer/views/page/form.vue

-<template>
-    <div class="app-container">
-        <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="活动名称">
-                <el-input v-model="form.name"></el-input>
-            </el-form-item>
-            <el-form-item label="活动区域">
-                <el-select v-model="form.region" placeholder="请选择活动区域">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="活动时间">
-                <el-col :span="11">
-                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
-                </el-col>
-                <el-col class="line" :span="2">-</el-col>
-                <el-col :span="11">
-                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
-                </el-col>
-            </el-form-item>
-            <el-form-item label="即时配送">
-                <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
-            </el-form-item>
-            <el-form-item label="活动性质">
-                <el-checkbox-group v-model="form.type">
-                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
-                    <el-checkbox label="地推活动" name="type"></el-checkbox>
-                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
-                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
-                </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="特殊资源">
-                <el-radio-group v-model="form.resource">
-                    <el-radio label="线上品牌商赞助"></el-radio>
-                    <el-radio label="线下场地免费"></el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item label="活动形式">
-                <el-input type="textarea" v-model="form.desc"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmit">立即创建</el-button>
-                <el-button>取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        }
-      }
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      }
-    }
-  }
-</script>

app/src/renderer/views/table/index.vue

-<template>
-  <div class="app-container">
-    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='ID' width="95">
-        <template scope="scope">
-          {{scope.$index}}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template scope="scope">
-          {{scope.row.title}}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="Author" width="110" align="center">
-        <template scope="scope">
-          <span>{{scope.row.author}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template scope="scope">
-          {{scope.row.pageviews}}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template scope="scope">
-          <i class="el-icon-time"></i>
-          <span>{{scope.row.display_time}}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-  import { getList } from '@/api/table';
-
-  export default {
-    data() {
-      return {
-        list: null,
-        listLoading: true
-      }
-    },
-    created() {
-      this.fetchData();
-    },
-    methods: {
-      fetchData() {
-        this.listLoading = true;
-        getList(this.listQuery).then(response => {
-          this.list = response.data.items;
-          this.listLoading = false;
-        })
-      }
-    }
-  };
-</script>

appveyor.yml

+version: 0.1.{build}
+
+branches:
+  only:
+    - master
+
+image: Visual Studio 2017
+platform:
+  - x64
+
+cache:
+  - node_modules
+  - '%APPDATA%\npm-cache'
+  - '%USERPROFILE%\.electron'
+  - '%USERPROFILE%\AppData\Local\Yarn\cache'
+
+init:
+  - git config --global core.autocrlf input
+
+install:
+  - ps: Install-Product node 8 x64
+  - choco install yarn --ignore-dependencies
+  - git reset --hard HEAD
+  - yarn
+  - node --version
+
+build_script:
+  - yarn build
+
+test: off

config.js

-'use strict'
-
-let config = {
-  // Use ESLint (extends `none`)
-  // Further changes can be made in `.eslintrc.js`
-  eslint: true,
-
-  // webpack-dev-server port
-  port: 9080
-}
-
-module.exports = config

config/dev.env.js

-module.exports = {
-  NODE_ENV: '"development"',
-  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
-}

config/index.js

-module.exports = {
-  build: {
-    env: require('./prod.env')
-  },
-  dev: {
-    env: require('./dev.env')
-  }
-}

config/prod.env.js

-module.exports = {
-  NODE_ENV: '"production"',
-  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"'
-}

package.json

 {
-  "name": "electron-vue-admin",
-  "version": "0.0.0",
+  "name": "my-project",
+  "version": "3.0.0",
+  "author": "Pan <panfree23@gmail.com>",
   "description": "An electron-vue project",
+  "license": "MIT",
+  "main": "./dist/electron/main.js",
   "scripts": {
-    "build": "npm run pack && build",
-    "build:dir": "npm run pack && build --dir",
-    "dev": "node tasks/runner.js",
-    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app",
-    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix app",
+    "build": "node .electron-vue/build.js && electron-builder",
+    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
+    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
+    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
+    "dev": "node .electron-vue/dev-runner.js",
+    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
+    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
     "pack": "npm run pack:main && npm run pack:renderer",
-    "pack:main": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.main.config.js",
-    "pack:renderer": "cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js",
-    "postinstall": "npm run lint:fix && cd app && npm install"
+    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
+    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
+    "postinstall": "npm run lint:fix"
   },
   "build": {
-    "productName": "ElectronVue",
+    "productName": "my-project",
     "appId": "org.simulatedgreg.electron-vue",
-    "category": "public.app-category.tools",
+    "directories": {
+      "output": "build"
+    },
+    "files": [
+      "dist/electron/**/*"
+    ],
     "dmg": {
       "contents": [
         {
@@ -32,63 +42,60 @@
         }
       ]
     },
-    "files": [
-      "dist/",
-      "node_modules/",
-      "package.json"
-    ],
     "mac": {
-      "icon": "app/icons/icon.icns"
+      "icon": "build/icons/icon.icns"
     },
     "win": {
-      "icon": "app/icons/icon.ico"
+      "icon": "build/icons/icon.ico"
     },
     "linux": {
-      "target": [
-        "AppImage"
-      ]
+      "icon": "build/icons"
     }
   },
-  "author": "Greg Holguin <simulatedgreg@gmail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "babel-core": "^6.8.0",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.8.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.18.0",
-    "babel-runtime": "^6.6.1",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.26.1",
-    "del": "^2.2.1",
-    "devtron": "^1.1.0",
-    "electron": "^1.3.1",
-    "electron-debug": "^1.1.0",
-    "electron-devtools-installer": "^2.0.1",
-    "electron-builder": "^11.4.4",
-    "electron-rebuild": "^1.1.3",
-    "babel-eslint": "^7.0.0",
-    "eslint": "^3.13.1",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^2.0.0",
-    "extract-text-webpack-plugin": "^2.0.0-beta.4",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.16.1",
-    "json-loader": "^0.5.4",
-    "style-loader": "^0.13.1",
-    "tree-kill": "^1.1.0",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^2.0.7",
-    "vue-html-loader": "^1.2.2",
-    "vue-loader": "^10.0.2",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.3.3",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.3.0",
-    "node-sass": "4.5.2",
-    "sass-loader": "6.0.5"
+  "dependencies": {
+    "vue": "^2.3.3",
+    "axios": "^0.16.1",
+    "vue-electron": "^1.0.6",
+    "vue-router": "^2.5.3",
+    "vuex": "^2.3.1"
   },
-  "dependencies": {}
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "babili-webpack-plugin": "^0.1.2",
+    "cfonts": "^1.1.3",
+    "chalk": "^2.1.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.4",
+    "del": "^3.0.0",
+    "devtron": "^1.4.0",
+    "electron": "^1.7.5",
+    "electron-debug": "^1.4.0",
+    "electron-devtools-installer": "^2.2.0",
+    "electron-builder": "^19.19.1",
+    "babel-eslint": "^7.2.3",
+    "eslint": "^4.4.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^3.1.1",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "html-webpack-plugin": "^2.30.1",
+    "multispinner": "^0.2.1",
+    "node-loader": "^0.6.0",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
+    "vue-html-loader": "^1.2.4",
+    "vue-loader": "^13.0.5",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.4.2",
+    "webpack": "^3.5.2",
+    "webpack-dev-server": "^2.7.1",
+    "webpack-hot-middleware": "^2.18.2"
+  }
 }

app/index.ejs → src/index.ejs

@@ -2,16 +2,21 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>electron-vue-admin</title>
-    <% if (htmlWebpackPlugin.options.appModules) { %>
-      <!-- Add `app/node_modules` to global paths so `require` works properly in development -->
+    <title>my-project</title>
+    <% if (htmlWebpackPlugin.options.nodeModules) { %>
+      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
       <script>
-        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.appModules.replace(/\\/g, '\\\\') %>')
+        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
       </script>
     <% } %>
   </head>
   <body>
     <div id="app"></div>
+    <!-- Set `__static` path to static files in production -->
+    <script>
+      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+    </script>
+
     <!-- webpack builds are automatically injected -->
   </body>
 </html>

app/src/main/index.dev.js → src/main/index.dev.js

 /**
- * This file is used specifically and only for development. It enables the use of ES6+
- * features for the main process and installs `electron-debug` & `vue-devtools`. There
- * shouldn't be any need to modify this file, but it can be used to extend your
- * development environment.
+ * This file is used specifically and only for development. It installs
+ * `electron-debug` & `vue-devtools`. There shouldn't be any need to
+ *  modify this file, but it can be used to extend your development
+ *  environment.
  */
 
-/* eslint-disable no-console */
+/* eslint-disable */
 
-// Set babel `env` and install `babel-register`
+// Set environment for development
 process.env.NODE_ENV = 'development'
-process.env.BABEL_ENV = 'main'
-
-require('babel-register')({
-  ignore: /node_modules/
-})
 
 // Install `electron-debug` with `devtron`
 require('electron-debug')({ showDevTools: true })
 
 // Install `vue-devtools`
 require('electron').app.on('ready', () => {
-  const installExtension = require('electron-devtools-installer')
+  let installExtension = require('electron-devtools-installer')
   installExtension.default(installExtension.VUEJS_DEVTOOLS)
-    .then(() => ({}))
+    .then(() => {})
     .catch(err => {
       console.log('Unable to install `vue-devtools`: \n', err)
     })

app/src/main/index.js → src/main/index.js

-'use strict'
-
 import { app, BrowserWindow } from 'electron'
 
+/**
+ * Set `__static` path to static files in production
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
+ */
+if (process.env.NODE_ENV !== 'development') {
+  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+}
+
 let mainWindow
 const winURL = process.env.NODE_ENV === 'development'
-  ? `http://localhost:${require('../../../config').port}`
+  ? `http://localhost:9080`
   : `file://${__dirname}/index.html`
 
-function createWindow() {
+function createWindow () {
   /**
    * Initial window options
    */
   mainWindow = new BrowserWindow({
-    height: 600,
-    width: 800
+    height: 563,
+    useContentSize: true,
+    width: 1000
   })
 
   mainWindow.loadURL(winURL)
@@ -21,9 +28,6 @@ function createWindow() {
   mainWindow.on('closed', () => {
     mainWindow = null
   })
-
-  // eslint-disable-next-line no-console
-  console.log('mainWindow opened')
 }
 
 app.on('ready', createWindow)
@@ -39,3 +43,23 @@ app.on('activate', () => {
     createWindow()
   }
 })
+
+/**
+ * Auto Updater
+ *
+ * Uncomment the following code below and install `electron-updater` to
+ * support auto updating. Code Signing with a valid certificate is required.
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
+ */
+
+/*
+import { autoUpdater } from 'electron-updater'
+
+autoUpdater.on('update-downloaded', () => {
+  autoUpdater.quitAndInstall()
+})
+
+app.on('ready', () => {
+  if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
+})
+ */

app/src/renderer/App.vue → src/renderer/App.vue

@@ -5,10 +5,11 @@
 </template>
 
 <script>
-export default {
-  name: 'app'
-}
+  export default {
+    name: 'my-project'
+  }
 </script>
-<style lang="scss">
-  @import './styles/index.scss'; // 全局自定义的css样式
+
+<style>
+  /* CSS */
 </style>

src/renderer/components/LandingPage.vue

+<template>
+  <div id="wrapper">
+    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
+    <main>
+      <div class="left-side">
+        <span class="title">
+          Welcome to your new project!
+        </span>
+        <system-information></system-information>
+      </div>
+
+      <div class="right-side">
+        <div class="doc">
+          <div class="title">Getting Started</div>
+          <p>
+            electron-vue comes packed with detailed documentation that covers everything from
+            internal configurations, using the project structure, building your application,
+            and so much more.
+          </p>
+          <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
+        </div>
+        <div class="doc">
+          <div class="title alt">Other Documentation</div>
+          <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
+          <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+  import SystemInformation from './LandingPage/SystemInformation'
+
+  export default {
+    name: 'landing-page',
+    components: { SystemInformation },
+    methods: {
+      open (link) {
+        this.$electron.shell.openExternal(link)
+      }
+    }
+  }
+</script>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body { font-family: 'Source Sans Pro', sans-serif; }
+
+  #wrapper {
+    background:
+      radial-gradient(
+        ellipse at top left,
+        rgba(255, 255, 255, 1) 40%,
+        rgba(229, 229, 229, .9) 100%
+      );
+    height: 100vh;
+    padding: 60px 80px;
+    width: 100vw;
+  }
+
+  #logo {
+    height: auto;
+    margin-bottom: 20px;
+    width: 420px;
+  }
+
+  main {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  main > div { flex-basis: 50%; }
+
+  .left-side {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .welcome {
+    color: #555;
+    font-size: 23px;
+    margin-bottom: 10px;
+  }
+
+  .title {
+    color: #2c3e50;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
+
+  .title.alt {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .doc p {
+    color: black;
+    margin-bottom: 10px;
+  }
+
+  .doc button {
+    font-size: .8em;
+    cursor: pointer;
+    outline: none;
+    padding: 0.75em 2em;
+    border-radius: 2em;
+    display: inline-block;
+    color: #fff;
+    background-color: #4fc08d;
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+    border: 1px solid #4fc08d;
+  }
+
+  .doc button.alt {
+    color: #42b983;
+    background-color: transparent;
+  }
+</style>

src/renderer/components/LandingPage/SystemInformation.vue

+<template>
+  <div>
+    <div class="title">Information</div>
+    <div class="items">
+      <div class="item">
+        <div class="name">Path:</div>
+        <div class="value">{{ path }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Route Name:</div>
+        <div class="value">{{ name }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Vue.js:</div>
+        <div class="value">{{ vue }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Electron:</div>
+        <div class="value">{{ electron }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Node:</div>
+        <div class="value">{{ node }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Platform:</div>
+        <div class="value">{{ platform }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        electron: process.versions['atom-shell'],
+        name: this.$route.name,
+        node: process.versions.node,
+        path: this.$route.path,
+        platform: require('os').platform(),
+        vue: require('vue/package.json').version
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .title {
+    color: #888;
+    font-size: 18px;
+    font-weight: initial;
+    letter-spacing: .25px;
+    margin-top: 10px;
+  }
+
+  .items { margin-top: 8px; }
+
+  .item {
+    display: flex;
+    margin-bottom: 6px;
+  }
+
+  .item .name {
+    color: #6a6a6a;
+    margin-right: 6px;
+  }
+
+  .item .value {
+    color: #35495e;
+    font-weight: bold;
+  }
+</style>

src/renderer/main.js

+import Vue from 'vue'
+import axios from 'axios'
+
+import App from './App'
+import router from './router'
+import store from './store'
+
+if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
+Vue.http = Vue.prototype.$http = axios
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  components: { App },
+  router,
+  store,
+  template: '<App/>'
+}).$mount('#app')

src/renderer/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'landing-page',
+      component: require('@/components/LandingPage').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
+  ]
+})

src/renderer/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules,
+  strict: process.env.NODE_ENV !== 'production'
+})

src/renderer/store/modules/Counter.js

+const state = {
+  main: 0
+}
+
+const mutations = {
+  DECREMENT_MAIN_COUNTER(state) {
+    state.main--
+  },
+  INCREMENT_MAIN_COUNTER(state) {
+    state.main++
+  }
+}
+
+const actions = {
+  someAsyncTask({ commit }) {
+    // do something async
+    commit('INCREMENT_MAIN_COUNTER')
+  }
+}
+
+export default {
+  state,
+  mutations,
+  actions
+}

src/renderer/store/modules/index.js

+/**
+ * The file enables `@/store/index.js` to import all vuex modules
+ * in a one-shot manner. There should not be any reason to edit this file.
+ */
+
+const files = require.context('.', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  if (key === './index.js') return
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default modules

tasks/runner.js

-'use strict'
-
-const config = require('../config')
-const exec = require('child_process').exec
-const treeKill = require('tree-kill')
-
-const YELLOW = '\x1b[33m'
-const BLUE = '\x1b[34m'
-const END = '\x1b[0m'
-
-let isElectronOpen = false
-
-function repeat(str, times) {
-  return (new Array(times + 1)).join(str)
-}
-
-function format(command, data, color) {
-  return color + command + END +
-    '  ' + // Two space offset
-    data.toString().trim().replace(/\n/g, '\n' + repeat(' ', command.length + 2)) +
-    '\n'
-}
-
-const children = []
-
-function run(command, color, name) {
-  const child = exec(command)
-
-  child.stdout.on('data', data => {
-    console.log(format(name, data, color))
-
-    /**
-     * Start electron after successful compilation
-     * (prevents electron from opening a blank window that requires refreshing)
-     */
-    if (/Compiled/g.test(data.toString().trim().replace(/\n/g, '\n' + repeat(' ', command.length + 2))) && !isElectronOpen) {
-      console.log(`${BLUE}Starting electron...\n${END}`)
-      run('cross-env NODE_ENV=development electron app/src/main/index.dev.js', BLUE, 'electron')
-      isElectronOpen = true
-    }
-  })
-
-  child.stderr.on('data', data => console.error(format(name, data, color)))
-  child.on('exit', code => exit(code))
-
-  children.push(child)
-}
-
-function exit(code) {
-  children.forEach(child => {
-    treeKill(child.pid)
-  })
-}
-
-console.log(`${YELLOW}Starting webpack-dev-server...\n${END}`)
-run(`webpack-dev-server --hot --colors --config webpack.renderer.config.js --port ${config.port} --content-base app/dist`, YELLOW, 'webpack')