Difference between revisions of "User:Saul/electron"

From Organic Design wiki
(→‎Electron CLI)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
This page is for my notes on using electron with vue.
+
This page is for my notes on using [https://electronjs.org/ electron] with vue.<br>
 +
[https://electronjs.org/docs Electron Docs.]
  
 
= Install =
 
= Install =
Line 22: Line 23:
 
== Create Vue Project ==
 
== Create Vue Project ==
 
<source lang="bash">
 
<source lang="bash">
−
mkdir <PROJECT NAME> && cd <PROJECT NAME>
+
electron-forge init my-new-project --template=vue
−
vue init webpack <PROJECT NAME> # create the project using the vue's cli.
+
cd my-new-project
−
npm i electron
+
electron-forge start # Or npm run start
−
npm i
 
 
</source>
 
</source>
 +
== Configure ==
 +
I recommend creating and modifying the following files:
 +
=== index.html ===
 +
<source lang="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>
 +
</source>
 +
=== main.js ===
 +
<source lang="javascript">
 +
import Vue from "vue";
 +
import App from "./App";
 +
 +
/* eslint-disable no-new */
 +
new Vue({
 +
el: "#app",
 +
render: h => h(App)
 +
});
 +
 +
</source>
 +
=== App.vue ===
 +
<source lang="html">
 +
<template>
 +
  <h2>Hello from {{text}}</h2>
 +
</template>
 +
 +
<script>
 +
export default {
 +
data () {
 +
return {
 +
text: "Vue!"
 +
}
 +
}
 +
};
 +
</script>
 +
</source>
 +
 +
=== 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...

Latest revision as of 01:37, 12 July 2018

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...

Retrieved from "https://organicdesign.nz/wiki/index.php?title=User:Saul/electron&oldid=124554"