first commit

src/index.ejs

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <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.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>

src/main/index.dev.js

@@ -0,0 +1,27 @@
+/**
+ * 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 */
+
+// Set environment for development
+process.env.NODE_ENV = 'development'
+
+// Install `electron-debug` with `devtron`
+require('electron-debug')({ showDevTools: true })
+
+// Install `vue-devtools`
+require('electron').app.on('ready', () => {
+  let installExtension = require('electron-devtools-installer')
+  installExtension.default(installExtension.VUEJS_DEVTOOLS)
+    .then(() => {})
+    .catch(err => {
+      console.log('Unable to install `vue-devtools`: \n', err)
+    })
+})
+
+// Require `main` process to boot app
+require('./index')

src/main/index.js

@@ -0,0 +1,67 @@
+'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:9080`
+  : `file://${__dirname}/index.html`
+
+function createWindow () {
+  /**
+   * Initial window options
+   */
+  mainWindow = new BrowserWindow({
+    height: 563,
+    useContentSize: true,
+    width: 1000
+  })
+
+  mainWindow.loadURL(winURL)
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    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()
+})
+ */

src/renderer/App.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="app">
+    <v-app dark>
+      <v-navigation-drawer
+        fixed
+        v-model="drawer"
+        app
+        clipped
+      >
+        <v-list>
+          <v-list-tile
+            router
+            :to="item.to"
+            :key="i"
+            v-for="(item, i) in items"
+            exact
+          >
+            <v-list-tile-action>
+              <v-icon v-html="item.icon"></v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title v-text="item.title"></v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-navigation-drawer>
+      <v-toolbar fixed app clipped-left>
+        <v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
+        <v-btn
+          icon
+          @click="back"
+        >
+          <v-icon>chevron_left</v-icon>
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-toolbar-title v-text="title"></v-toolbar-title>
+        <v-spacer></v-spacer>
+      </v-toolbar>
+      <v-content>
+        <v-container fluid fill-height>
+          <v-slide-y-transition mode="out-in">
+            <router-view></router-view>
+          </v-slide-y-transition>
+        </v-container>
+      </v-content>
+      <v-footer :fixed="fixed" app>
+        <v-spacer></v-spacer>
+        <span>&copy; 2017</span>
+      </v-footer>
+    </v-app>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'my-project',
+    data: () => ({
+      clipped: false,
+      drawer: false,
+      fixed: false,
+      items: [
+        { icon: 'fas fa-home', title: 'Welcome', to: '/' },
+        { icon: 'fas fa-lightbulb', title: 'Inspire', to: '/inspire' },
+        { icon: 'fas fa-leaf', title: 'RM', to: '/rm' }
+      ],
+      miniVariant: false,
+      right: true,
+      rightDrawer: false,
+      title: 'My awesome APP'
+    }),
+    methods: {
+      back () {
+        this.$router.go(-1)
+      }
+    }
+  }
+</script>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');
+  @import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');
+  /* Global CSS */
+
+</style>

src/renderer/components/InspireView.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-layout column justify-center>
+    <v-flex>
+      <img src="/static/v.png" alt="Vuetify.js" class="mb-5" />
+      <blockquote class="text-xs-center">
+        &#8220;First, solve the problem. Then, write the code.&#8221;
+        <footer>
+          <small>
+            <em>&mdash;John Johnson</em>
+          </small>
+        </footer>
+      </blockquote>
+    </v-flex>
+  </v-layout>
+</template>
+
+<style scoped>
+  img {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+</style>

src/renderer/components/WelcomeView.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-layout row wrap justify-center id="wrapper">
+    <v-flex xs12 md4 offset-md1 class="text-xs-center centered">
+      <img id="logo" class="logo" src="~@/assets/logo.png" alt="electron-vue">
+    </v-flex>
+    <v-flex xs12 md6 class="text-xs-center centered">
+      <img id="logo" class="logo" src="/static/v.png" alt="Vuetifyjs">
+    </v-flex>
+    <v-flex xs10 class="mt-3">
+      <v-card>
+        <v-card-text>
+          <p>Welcome to the Electron-vue + Vuetify template.</p>
+          <p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications. For more information on Vuetify, check out the <a href="https://vuetifyjs.com" target="_blank">documentation</a>. If you have questions, please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">discord</a>. Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" title="contribute">issue board</a>.</p>
+          <p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
+          <div class="text-xs-right">
+            <em><small>&mdash; John Leider</small></em>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn primary flat router to="/inspire">Continue</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-flex>
+    <v-flex xs10 class="mt-4">
+      <system-information></system-information>
+    </v-flex>
+    <v-flex xs10 class="mt-4">
+      <v-card>
+        <v-card-title class="headline">Docs</v-card-title>
+        <v-divider></v-divider>
+        <v-card-actions class="pt-3 pb-3">
+          <v-spacer></v-spacer>
+          <v-btn class="link-btn" @click="open('https://vuejs.org/v2/guide/')">Vue</v-btn>
+          <v-spacer></v-spacer>
+          <v-btn class="link-btn" @click="open('https://electron.atom.io/docs/')">Electron</v-btn>
+          <v-spacer></v-spacer>
+          <v-btn class="link-btn" @click="open('https://vuetifyjs.com')">Vuetify</v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+  import SystemInformation from './WelcomeView/SystemInformation'
+
+  export default {
+    name: 'welcome',
+    components: { SystemInformation },
+    methods: {
+      open (link) {
+        this.$electron.shell.openExternal(link)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .centered
+  {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo
+  {
+    max-width: 100%;
+  }
+
+  .link-btn
+  {
+    width: 150px;
+  }
+</style>

src/renderer/components/WelcomeView/SystemInformation.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-card>
+    <v-card-title class="headline">
+      Informations
+    </v-card-title>
+    <v-divider></v-divider>
+    <v-layout row wrap class="pa-3">
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Path:</div>
+        <div class="value">{{ path }}</div>
+      </v-flex>
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Name:</div>
+        <div class="value">{{ name }}</div>
+      </v-flex>
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Vue.js:</div>
+        <div class="value">{{ vue }}</div>
+      </v-flex>
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Electron:</div>
+        <div class="value">{{ electron }}</div>
+      </v-flex>
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Node:</div>
+        <div class="value">{{ node }}</div>
+      </v-flex>
+      <v-flex xs12 sm6 md4 class="item">
+        <div class="name">Platform:</div>
+        <div class="value">{{ platform }}</div>
+      </v-flex>
+    </v-layout>
+  </v-card>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        electron: process.versions['atom-shell'],
+        name: 'landing-page',
+        node: process.versions.node,
+        path: '/',
+        platform: require('os').platform(),
+        vue: require('vue/package.json').version
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .item
+  {
+    text-align: center;
+  }
+
+  .name
+  {
+    display: inline;
+    font-style: italic;
+    font-weight: 300;
+    font-size: 16px;
+    letter-spacing: 1px;
+  }
+
+  .value
+  {
+    display: inline;
+    font-style: italic;
+    font-weight: 600;
+    font-size: 18px;
+    padding-left: 5px;
+  }
+</style>

src/renderer/components/rm.vue

@@ -0,0 +1,15 @@
+<template>
+    <v-layout row wrap justify-center id="wrapper">
+        <p>Coucou RM</p>
+    </v-layout>
+</template>
+
+<script>
+    export default {
+      name: 'rm'
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/main.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import axios from 'axios'
+import Vuetify from 'vuetify'
+import 'vuetify/dist/vuetify.css'
+
+import App from './App'
+import router from './router'
+import store from './store'
+
+Vue.use(Vuetify)
+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

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'welcome-view',
+      component: require('@/components/WelcomeView').default
+    },
+    {
+      path: '/inspire',
+      name: 'inspire',
+      component: require('@/components/InspireView').default
+    },
+    {
+      path: '/rm',
+      name: 'rm',
+      component: require('@/components/rm').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
+  ]
+})

src/renderer/store/index.js

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,14 @@
+/**
+ * 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