init

devops724 · Mar 28, 2020 · 37e2380 · 37e2380
1 parent 7de49f3
commit 37e2380
Show file tree

Hide file tree

Showing 16 changed files with 316 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+node_modules
diff --git a/README.md b/README.md
@@ -1,2 +1,12 @@
 # Electron-Vue-Webpack4-Simple-Boilerplate
 most Simple vue Webpack Electron config
+
+#setup
+npm install
+
+#run
+open two terminal 
+in first
+npm run dev
+in second
+npm start
diff --git a/app/build/bundle.js b/app/build/bundle.js
diff --git a/app/build/electron.png b/app/build/electron.png
diff --git a/app/build/vue.png b/app/build/vue.png
diff --git a/app/build/webpack.png b/app/build/webpack.png
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Electron + Vue + Webpack</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="build/bundle.js"></script>
+    </body>
+</html>
diff --git a/app/src/App.vue b/app/src/App.vue
@@ -0,0 +1,85 @@
+<template>
+    <div id='app'>
+        <img class='logo' src='src/assets/electron.png' />
+        <img class='logo' src='src/assets/vue.png' />
+        <img class='logo' src='src/assets/webpack.png' />
+        <hello></hello>
+        <p>
+            If you are trying to build Electron apps using Vue 2, or you just
+            want to play around with them, feel free to use this
+            seed as starting point.
+        </p>
+        <p>
+            Pay attention to how resources inside src/ folder are built, CSS code
+            inside .vue components is embed into the HTML file when loaded, or
+            simply relative image paths are updated to public paths after
+            building with Webpack.
+        </p>
+        <p>
+            Here are the docs for
+            <a href='#' @click="link('http://electron.atom.io/docs/')">
+                Electron</a>,
+            <a href='#' @click="link('http://vuejs.org/guide/')">
+                Vue 2</a> and
+            <a href='#' @click="link('http://webpack.github.io/docs/')">
+                Webpack</a>.
+            Customize this template as you wish by adding any
+            fancy tool you are used to.
+        </p>
+        <p>
+            If you have any issues, please
+            file an issue at this seed's
+            <a href='#' @click="link('https://github.com/pastahito/electron-vue-webpack')">
+                repository</a>.
+        </p>
+    </div>
+</template>
+
+<script>
+    import Hello from './components/Hello.vue'
+
+    // With shell.openExternal(url) is how
+    // external urls must be handled, not href
+    const shell = require('electron').shell
+
+    export default {
+        components: {
+            Hello
+        },
+        methods: {
+          link: (url) => {
+            shell.openExternal(url)
+          }
+        }
+    }
+</script>
+
+<style>
+    html {
+        height: 100%;
+    }
+    body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        margin: auto;
+    }
+    #app {
+        color: #2c3e50;
+        max-width: 600px;
+        font-family: Source Sans Pro, Helvetica, sans-serif;
+        text-align: center;
+    }
+    #app a {
+        color: #42b983;
+        text-decoration: none;
+    }
+    #app p {
+        text-align: justify;
+    }
+    .logo {
+        width: auto;
+        height: 100px;
+    }
+</style>
diff --git a/app/src/assets/electron.png b/app/src/assets/electron.png
diff --git a/app/src/assets/vue.png b/app/src/assets/vue.png
diff --git a/app/src/assets/webpack.png b/app/src/assets/webpack.png
diff --git a/app/src/components/Hello.vue b/app/src/components/Hello.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class='hello'>
+        <h1>{{ msg }}</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            msg: 'Hello Vue!'
+        }
+    }
+}
+</script>
+
+<style scoped>
+h1 {
+    color: #42b983;
+}
+</style>
diff --git a/app/src/entry.js b/app/src/entry.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/main.js b/main.js
@@ -0,0 +1,20 @@
+// Basic init
+const electron = require('electron')
+const {app, BrowserWindow} = electron
+
+// Let electron reloads by itself when webpack watches changes in ./app/
+require('electron-reload')(__dirname)
+
+// To avoid being garbage collected
+let mainWindow
+
+app.on('ready', () => {
+
+    let mainWindow = new BrowserWindow({width: 800, height: 600,
+		webPreferences: {
+            nodeIntegration: true
+        }})
+
+    mainWindow.loadFile(`app/index.html`)
+
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "electron-vue-webpack",
+  "version": "1.0.0",
+  "description": "A minimal Electron + Vue 2 + Webpack 2 setup with few dependencies for quick development.",
+  "main": "main.js",
+  "scripts": {
+    "dev": "webpack",
+    "start": "electron . --no-sandbox"
+  },
+  "author": "J. Renato Ramos González <[email protected]>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pastahito/electron-vue-webpack.git"
+  },
+  "license": "WTFPL",
+  "dependencies": {
+    "vue": "^2.0.1"
+  },
+  "devDependencies": {
+    "css-loader": "^3.4.2",
+    "electron": "^8.1.1",
+    "electron-reload": "^1.5.0",
+    "fibers": "^4.0.2",
+    "file-loader": "^6.0.0",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "vue-loader": "^15.9.1",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
+  },
+  "bugs": {
+    "url": "https://github.com/pastahito/electron-vue-webpack/issues"
+  },
+  "homepage": "https://github.com/pastahito/electron-vue-webpack#readme"
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,80 @@
+const { VueLoaderPlugin } = require('vue-loader')
+module.exports = {
+
+    watch: true,
+	mode:"production",
+    target: 'electron-main',
+
+    entry: './app/src/entry.js',
+
+    output: {
+        path: __dirname + '/app/build',
+        publicPath: 'build/',
+        filename: 'bundle.js'
+    },
+
+    module: {
+        rules: [
+
+
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+          options: {
+            loaders: {
+            }
+            // other vue-loader options go here
+          }
+        },
+        {
+          test: /\.(png|jpg|gif|svg)$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]?[hash]'
+          }
+        },
+
+        {
+          test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
+          loader: 'file-loader?name=assets/fonts/[name].[ext]',
+        },
+        {
+          test: /\.s(c|a)ss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            {
+              loader: 'sass-loader',
+              // Requires sass-loader@^8.0.0
+              options: {
+                implementation: require('sass'),
+                sassOptions: {
+                  fiber: require('fibers'),
+                  indentedSyntax: true // optional
+                },
+              },
+            },
+          ],
+        },
+         {
+            test: /\.css$/,
+            use: ["style-loader", "css-loader"],
+            /*include: [
+              path.resolve(__dirname, 'node_modules'),
+            ]*/
+
+        },
+    ]
+    },
+
+    resolve: {
+        alias: {vue: 'vue/dist/vue.js'}
+    },
+    plugins: [
+    /*new HtmlWebpackPlugin({
+        template: "./src/index.html"
+    }),*/
+    new VueLoaderPlugin()
+  ],
+
+}