Difference between revisions of "User:Saul/electron"
From Organic Design wiki
m (→App.vue) |
m (→App.vue) |
||
| Line 66: | Line 66: | ||
<script> | <script> | ||
export default { | export default { | ||
| − | |||
data () { | data () { | ||
return { | return { | ||
| − | text: "Vue" | + | text: "Vue!" |
} | } | ||
} | } | ||
Revision as of 00:15, 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 {
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
