feat(frontend): integrate vue with automation scripts and configs

debloper · Dec 15, 2019 · 6ee4768 · 6ee4768
1 parent 9c0dd4e
commit 6ee4768
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ pids
 .tmp/
 dist/
 builds/
+src/dist/
 
 # Deps
 node_modules/

diff --git a/package.json b/package.json
@@ -4,16 +4,41 @@
   "description": "Got rogue daemons in your system?",
   "main": "src/index.js",
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "build": "vue-cli-service build ./src/app",
+    "serve": "vue-cli-service serve ./src/app"
   },
   "dependencies": {
-    "electron": "^7.1.4"
+    "electron": "^7.1.4",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/preset-stage-2": "7.0.0-beta.44",
+    "@vue/cli-plugin-babel": "^3.0.0-beta.6",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
+    "@vue/cli-service": "^3.0.0-beta.6",
+    "vue-template-compiler": "^2.5.13"
   },
-  "devDependencies": {},
   "repository": {
     "type": "git",
     "url": "[email protected]:debloper/exorcist.git"
   },
+  "vue": {
+    "publicPath": "",
+    "outputDir": "src/dist"
+  },
+  "babel": {
+    "presets": [
+      "@vue/app"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ]
+  },
   "keywords": [
     "linux",
     "startup",

diff --git a/src/app/components/app.vue b/src/app/components/app.vue
@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <h1 id="title">Exorcist</h1>
+    <pre id="details">loading...</pre>
+  </div>
+</template>
+
+<script>
+// const { ipcRenderer } = require('electron')
+
+// ipcRenderer.on('loaded', (event, data) => {
+//   document.getElementById('details').innerHTML = JSON.stringify(data, '  ', null)
+// })
+
+module.exports = {
+  name: 'app'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/app/index.html b/src/app/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="utf-8">
     <title>exorcist</title>
     <link rel="stylesheet" href="index.css">
     <script src="index.js"></script>
   </head>
   <body>
-    <h1 id="title">Exorcist</h1>
-    <pre id="details">loading...</pre>
+    <div id="app"></div>
   </body>
 </html>
diff --git a/src/app/index.js b/src/app/index.js
@@ -1,6 +1,6 @@
+import Vue from 'vue'
+import app from './components/app.vue'
 
-const { ipcRenderer } = require('electron')
-
-ipcRenderer.on('loaded', (event, data) => {
-  document.getElementById('details').innerHTML = JSON.stringify(data, '  ', null)
-})
+new Vue({
+  render: v => v(app)
+}).$mount('#app')
diff --git a/src/index.js b/src/index.js
@@ -12,9 +12,7 @@ let window;
 const createWindow = () => {
   window = new BrowserWindow(config);
 
-  window.loadFile(`${__dirname}/app/index.html`);
-
-  // window.webContents.openDevTools()
+  window.loadFile(`${__dirname}/dist/index.html`);
 
   window.webContents.on('did-finish-load', () => {
     exec('systemd-analyze blame', (e, out, err) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ pids @@
     .tmp/
     dist/
     builds/
+    src/dist/
     # Deps
     node_modules/
@@ Expand Down @@