├── .gitignore ├── README.md ├── app ├── index.html └── src │ ├── App.vue │ ├── assets │ ├── electron.png │ ├── vue.png │ └── webpack.png │ ├── components │ └── Hello.vue │ └── entry.js ├── main.js ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron-vue-webpack 2 | Got tired finding Electron/Vue2/Webpack2 templates with fancy add-ons you don't really need? 3 | 4 | Give a try to this minimal template with very few dependencies for quick development and prototyping. 5 | 6 | ![w10 sample](https://cloud.githubusercontent.com/assets/11739632/19222705/0f8c55fc-8e5f-11e6-97fa-0d3943f43358.png) 7 | 8 | ## Install 9 | ``` bash 10 | # Clone the repository once 11 | $ git clone https://github.com/pastahito/electron-vue-webpack 12 | 13 | # Go into the repository (rename it as you wish) 14 | $ cd electron-vue-webpack 15 | 16 | # Install the 7 only dependencies once 17 | $ npm install 18 | ``` 19 | 20 | ## Usage 21 | Run this two commands in two different prompts to start developing with hot reloading. 22 | ``` bash 23 | # Webpack builds once and watches to apply only the changes 24 | $ npm run dev 25 | 26 | # Start you electron app 27 | $ npm start 28 | ``` 29 | 30 | ## What's included 31 | You don't really need more stuff to start playing around with Electron, Vue 2 and Webpack 2. 32 | 33 | - Support for .vue (single file components). Use them with HTML & ES6 & CSS. 34 | - No Express, neither Babel is needed (more than 97% ES6 is supported in Node/Electron). 35 | 36 | ## Template structure 37 | ``` 38 | ├── electron-vue-webpack/ # Your project's name 39 | 40 | ├── app/ 41 | 42 | ├── build/ # Webpack will bundle your css/js/img here 43 | 44 | ├── src/ 45 | 46 | ├── assets/ # Images go here 47 | ├── electron.png 48 | ├── vue.png 49 | ├── webpack.png 50 | 51 | ├── components/ # Webcomponents go here 52 | ├── Hello.vue 53 | 54 | ├── App.vue # Vue app. Your global css can go here 55 | ├── entry.js # App entry. Your global js can go here 56 | 57 | ├── index.html # Single Page Application HTML, it only uses build's files 58 | 59 | ├── main.js # Electron app init 60 | ├── package.json 61 | ├── webpack.config.js # Minimal webpack setup 62 | ``` 63 | 64 | ## Related 65 | - [electron-react-webpack](https://github.com/pastahito/electron-react-webpack) - 66 | Electron template using React instead of Vue 2. 67 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Electron + Vue + Webpack 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/App.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 56 | 57 | 86 | -------------------------------------------------------------------------------- /app/src/assets/electron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renato-rg/electron-vue-webpack/70ab7ab7e7639282ba9b52a10ad087ae776914b7/app/src/assets/electron.png -------------------------------------------------------------------------------- /app/src/assets/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renato-rg/electron-vue-webpack/70ab7ab7e7639282ba9b52a10ad087ae776914b7/app/src/assets/vue.png -------------------------------------------------------------------------------- /app/src/assets/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renato-rg/electron-vue-webpack/70ab7ab7e7639282ba9b52a10ad087ae776914b7/app/src/assets/webpack.png -------------------------------------------------------------------------------- /app/src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /app/src/entry.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // Basic init 2 | const electron = require('electron') 3 | const {app, BrowserWindow} = electron 4 | 5 | // Let electron reloads by itself when webpack watches changes in ./app/ 6 | require('electron-reload')(__dirname) 7 | 8 | // To avoid being garbage collected 9 | let mainWindow 10 | 11 | app.on('ready', () => { 12 | 13 | let mainWindow = new BrowserWindow({width: 800, height: 600}) 14 | 15 | mainWindow.loadURL(`file://${__dirname}/app/index.html`) 16 | 17 | }) 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-vue-webpack", 3 | "version": "1.0.0", 4 | "description": "A minimal Electron + Vue 2 + Webpack 2 setup with few dependencies for quick development.", 5 | "main": "main.js", 6 | "scripts": { 7 | "dev": "webpack", 8 | "start": "electron ." 9 | }, 10 | "author": "J. Renato Ramos González ", 11 | "repository": "pastahito/electron-vue-webpack", 12 | "license": "WTFPL", 13 | "dependencies": { 14 | "vue": "^2.0.1" 15 | }, 16 | "devDependencies": { 17 | "css-loader": "^0.25.0", 18 | "electron": "^1.4.3", 19 | "electron-reload": "^1.0.2", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^9.5.1", 22 | "webpack": "^2.1.0-beta.22" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | watch: true, 4 | 5 | target: 'electron', 6 | 7 | entry: './app/src/entry.js', 8 | 9 | output: { 10 | path: __dirname + '/app/build', 11 | publicPath: 'build/', 12 | filename: 'bundle.js' 13 | }, 14 | 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader' 20 | }, 21 | { 22 | test: /\.(png|jpg|gif|svg)$/, 23 | loader: 'file-loader', 24 | query: { 25 | name: '[name].[ext]?[hash]' 26 | } 27 | } 28 | ] 29 | }, 30 | 31 | resolve: { 32 | alias: {vue: 'vue/dist/vue.js'} 33 | } 34 | 35 | } 36 | --------------------------------------------------------------------------------