Add electron, webpack, vue example

shama · shama · commit 84ecffe0b9e5 · 2018-06-01T08:30:39.000-07:00
diff --git a/electron-webpack-vuejs/.gitignore b/electron-webpack-vuejs/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/electron-webpack-vuejs/README.md b/electron-webpack-vuejs/README.md
@@ -0,0 +1,10 @@
+# Electron with webpack and Vue.js
+
+> [https://youtu.be/oL7vIDkDOsg](https://youtu.be/oL7vIDkDOsg)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app.
diff --git a/electron-webpack-vuejs/package.json b/electron-webpack-vuejs/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "electron-webpack-vuejs",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "electron-webpack dev",
+    "build": "electron-webpack && electron-builder"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^2.0.2",
+    "electron-builder": "^20.15.1",
+    "electron-webpack": "^2.1.2",
+    "vue": "^2.5.16",
+    "vue-loader": "^15.2.2",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.9.1"
+  },
+  "dependencies": {
+    "source-map-support": "^0.5.6"
+  }
+}
diff --git a/electron-webpack-vuejs/src/index.html b/electron-webpack-vuejs/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= process.env.npm_package_productName %></title>
+    <meta charset="utf-8">
+    <script>
+      <% if (htmlWebpackPlugin.options.nodeModules) { %>
+        require('module').globalPaths.push(
+          '<%= htmlWebpackPlugin.options.nodeModules %>'.replace(/\\/g, '\\\\'),
+        )
+      <% } %>
+      require('source-map-support/source-map-support.js').install()
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/electron-webpack-vuejs/src/main/index.js b/electron-webpack-vuejs/src/main/index.js
@@ -0,0 +1,20 @@
+import { app, BrowserWindow } from 'electron'
+import path from 'path'
+import { format as formatUrl } from 'url'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+app.on('ready', () => {
+  let window = new BrowserWindow({
+    width: 1024
+  })
+  if (isDevelopment) {
+    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
+  } else {
+    window.loadURL(formatUrl({
+      pathname: path.join(__dirname, 'index.html'),
+      protocol: 'file',
+      slashes: true
+    }))
+  }
+})
diff --git a/electron-webpack-vuejs/src/renderer/App.vue b/electron-webpack-vuejs/src/renderer/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>{{name}}</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: 'Obligatory Bear'
+    }
+  }
+}
+</script>
diff --git a/electron-webpack-vuejs/src/renderer/index.js b/electron-webpack-vuejs/src/renderer/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+new Vue({
+  el: '#app',
+  render(h) {
+    return h(App)
+  }
+})
diff --git a/electron-webpack-vuejs/webpack.config.js b/electron-webpack-vuejs/webpack.config.js
@@ -0,0 +1,14 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ]
+}
