Difference between revisions of "User:Saul/electron"
From Organic Design wiki
m (→Install) |
|||
| 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 = | ||
Latest revision as of 01:37, 12 July 2018
This page is for my notes on using electron with vue.
Electron Docs.
Contents
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-rootElectron 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 startConfigure
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...
