Difference between revisions of "User:Saul/electron"
From Organic Design wiki
(→Create Vue Project) |
(→Configure) |
||
| Line 26: | Line 26: | ||
electron-forge start # Or npm run start | electron-forge start # Or npm run start | ||
</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 { | ||
| + | name: 'test', | ||
| + | data () { | ||
| + | return { | ||
| + | text: 'test' | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | </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 | ||
Revision as of 00:11, 12 July 2018
This page is for my notes on using electron with vue.
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 {
name: 'test',
data () {
return {
text: 'test'
}
}
};
</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
