User:Saul/electron

From Organic Design wiki

This page is for my notes on using electron with vue.
Electron Docs.

Install

Electron CLI

sudo npm i -g electron # install electron globally.

If you get an error about not being able to create a folder, you can force it with

sudo npm i -g electron --unsafe-perm=true --allow-root

Electron Forge CLI

I recomend using electron forge.

sudo npm install -g electron-forge # install electron-forge globally.

Again if it errors you can force with

sudo npm install -g electron-forge --unsafe-perm=true --allow-root # install electron-forge globally.

Create Vue Project

electron-forge init my-new-project --template=vue
cd my-new-project
electron-forge start # Or npm run start

Configure

I recommend creating and modifying the following files:

index.html

<!DOCTYPE html>

<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
	</head>

	<body>
		<div id="app"></div>
	</body>

	<script src="main.js"></script>
</html>

main.js

import Vue from "vue";
import App from "./App";

/* eslint-disable no-new */
new Vue({
	el: "#app",
	render: h => h(App)
});

App.vue

<template>
  <h2>Hello from {{text}}</h2>
</template>

<script>
export default {
	data () {
		return {
			text: "Vue!"
		}
	}
};
</script>

Folders

I would also recommend creating the following folders to keep a nice vue project structure:

  • components
  • pages

And if you are going to use vuex and/or vue router:

  • router
  • store

Integration With Existing Apps

More to come...