When I opened the app with electron , the page did not open and when I was viewing the console it showed the following error:
"[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. "
the code is the one here
<html>
<head>
<title>Photon</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/photon.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="window">
<!-- Common layout -->
<header class="toolbar toolbar-header">
<h1 class="title">Loja Casa e Construção</h1>
<div class="toolbar-actions">
<div class="btn-group">
<button class="btn btn-default">
<span class="icon icon-home"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-folder"></span>
</button>
<button class="btn btn-default active">
<span class="icon icon-cloud"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-popup"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-shuffle"></span>
</button>
</div>
<button class="btn btn-default">
<span class="icon icon-home icon-text"></span>
Filters
</button>
<button class="btn btn-default btn-dropdown pull-right">
<span class="icon icon-megaphone"></span>
</button>
</div>
</header>
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">
<p>
Agora vai sentar, Vai sentar, vai sentar
</p>
</div>
<div class="pane">
<button type="button" @click="createClient()" class="btn btn-primary">Cadastro de Clientes</button>
<table class="table table-striped">
<thead>
<tr>
<th>
Nome
</th>
<th>
CPF
</th>
<th>
Telefone
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="cliente in clientes">
<td>
{{cliente.nome}}
</td>
<td>
{{cliente.cpf}}
</td>
<td>
{{cliente.telefone}}
</td>
<td>
<button type="button" class="btn btn-primary" @click=editClient(cliente)>Editar</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="toolbar toolbar-footer">
<h1 class="title">
Developer by Antony de Lara
</h1>
</footer>
</div>
<div id="modal" v-if="openModal">
<div class='wrap'>
<form action="" class="pane-body" id="cadastro-cliente">
<h3 v-if="mode=='cadastro'">
Cadastro de Cliente
</h3>
<h3 v-if="mode=='edicao'">
Editar de Cliente
</h3>
<div class="form-group">
<input type="text" class="form-control" id="nome" v-model: "client.nome" placeholder="Nome" />
</div>
<div class="form-group">
<input type="text" class="form-control" id="cpf" v-model: "client.cpf" placeholder="CPF" />
</div>
<div class="form-group">
<input type="text" class="form-control" id="telefone" v-model: "client.telefone" placeholder="Telefone" />
</div>
<button type="button" class="btn btn-positive" @click="clientStoreOrUpdate()" id="salvar">Salvar</button>
<button type="Button" class="btn btn-negative" @click="openModal=false">Cancelar</button>
</form>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
</body>
<script>
/*import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';*/
var read = require('read-file-utf8')
var loki = require('lokijs');
var db = new loki('db.json')
var data = read(__dirname + '/db.json');
db.loadJSON(data);
window.Vue = require('vue');
//console.log(read(__dirname+'/db.json')); //¹
var clientes = db.getCollection('clientes');
//console.log(db);
new Vue({
el: 'body',
data: {
clientes: [],
mode: '',
client: {
nome: '',
cpf: '',
telefone: ''
},
openModal: false
},
ready: function () {
this.clientes = clientes.data;
console.log(this.clientes);
},
methods: {
editClient: function (client) {
this.mode = 'edicao';
//alert('Abrindo Editar');
this.openModal = true;
this.client = client;
},
createClient: function () {
this.mode = "cadastro";
this.openModal = true;
this.client = {
nome: '',
cpf: '',
telefone: ''
};
},
clientStoreOrUpdate: function () {
if (typeof this.client.$loki != 'undefined') {
clientes.update(this.client);
} else {
clientes.update(this.client);
}
db.save();
this.openModal = false;
}
}
})
</script>
</html>
renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
var loki = require('lokijs');
var db = new loki('db.json')
var clientes = db.addCollection('clientes');
/*
clientes.insert({
nome:'Jao',
email: '[email protected]'
});
db.save()
*/
function ready(fn) {
if(document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function () {
//Body ..
document.querySelector('#salvar').addEventListener('click', function(e){
e.preventDefault();
//alert('OK'); //¹
let data = {
nome:document.querySelector('#nome').value,
cpf:document.querySelector('#cpf').value,
telefone:document.querySelector('#telefone').value
};
//console.log(data); //²
clientes.insert(data); //³
db.save();
alert('Salvo com sucesso')
document.querySelector('#cadastro-cliente').reset()
})
})