Você sabia que é possível desenvolver APPs desktop para múltiplas plataformas (linux, mac e windows) usando Javascript? Muitos softwares que você utiliza no seu computador como Vs Code, Atom, GitKraken, Slack, Discord e etc utilizam um framework javascript chamado Electron.
Para desenvolver projetos usando Electron é bem simples, inclusive você pode usar tecnologias famosos como VueJs, React, Angular e etc associado com o Electron para criar seus softwares de desktop.
Já que os principais editores de texto são criados usando Electron, vamos criar neste artigo um editor de texto com Electron + VueJs, então vem com a gente nessa jornada e aprenda como criar APPs desktop com javascript 😁
O que vamos desenvolver:
Neste artigo vamos criar nosso editor de Rich Text usando o Quill editor para edição do conteúdo (que vai permitir a inclusão de imagens, emoticons, códigos e etc), Bulma para estilização e o Vue.js juntamente com Electron para tornar nossa aplicação instalável no desktop, além de aprender como distribuir nosso APP ao final para diversas plataformas.
Caso você deseje ver os códigos do projeto completo: Link do projeto no GitHub
Nossas ferramentas:
- Vue cli 3
- electron
- quill-editor
- Nodejs v10
Configurando o projeto
1 – Inicialmente precisamos instalar o vue@cli. Usando npm:
|
1 |
npm install -g @vue/cli |
ou yarn:
|
1 |
yarn global add @vue/cli |
2 – Após a instalação do Vue cli iremos criar nosso projeto:
|
1 |
vue create escola_javascript_editor |
3 – Entre na pasta para ver nosso projeto vue criado
|
1 |
cd escola_javascript_editor |
A partir da versão 3 o Vue@cli fornece uma interface web para gerenciarmos nossas aplicações. Nela é possível instalar plugins, controlar dependências além de rodar nossas tarefas configuradas no package.json. Agora iremos adicionar a pasta do projeto ao gerenciador de projetos (project manager) do Vue ui.
4 – Abra a Vue ui:
|
1 |
vue ui |
Após alguns instantes o Vue ui abrirá o browser para mostrar o project manager.
5 – Importe a pasta do projeto através da tab import e em seguida clique no botão “Import this folder”. Como havíamos entrado na pasta do projeto anteriormente, não precisamos procurar a pasta para adicionar ao Vue Project Manager.
Uma vez importado nosso projeto para o project manager, o Vue ui abrirá a área de gerenciamento do nosso projeto.
A essa hora você deve estar se perguntando: “Onde está o código?”. Calma, estamos chegando na parte divertida.
6 – Vá até a seção de Plugins e clique no botão “+ Add plugin”. Iremos instalar o “vue-cli-plugin-electron-builder”, ele faz a pré configuração do electron com o Vue para o nosso APP.
Caso queira saber um pouco mais sobre o plugin basta ir no link do repositório: https://github.com/nklayman/vue-cli-plugin-electron-builder
7 – Uma vez instalado o plugin podemos rodar o comando para ver nosso app desktop ganhando vida. 😍
|
1 |
yarn run electron:serve |
Adicionando o Quill editor e o Bulma ao projeto
Iremos instalar as dependências do Quill editor e o Bulma, o padrão dele é utilizando jquery mas em nosso exemplo usaremos um componente VueJs.
1 – Adicione ao projeto o vue-quill-editor, alguns plugins do quill e o bulma para deixar nosso editor com mais recursos:
|
1 |
yarn add vue-quill-editor quill quill-emoji @appsflare/quill-image-resize-module quill-image-drop-module highlight.js bulma |
2 – Para usarmos o quill no nosso projeto vamos criar um plugin do Vue, crie o arquivo quill_editor.js com o conteúdo:
escola_javascript_editor/src/plugins/quill_editor.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import Vue from 'vue' import VueQuillEditor, { Quill } from "vue-quill-editor"; // Permite drag and drop de imagem no editor import { ImageDrop } from "quill-image-drop-module"; // Adiciona suporte ao resize de imagem import ImageResize from '@appsflare/quill-image-resize-module' // Adiciona suporte a emojis (editor sem emojis não é editor 😏) import QuillEmoji from 'quill-emoji' // Tema do quill import "quill/dist/quill.snow.css"; import "quill-emoji/dist/quill-emoji.css"; Quill.register({ 'modules/imageDrop': ImageDrop, 'modules/imageResize': ImageResize, 'modules/emoji': QuillEmoji }); Vue.use(VueQuillEditor) |
3 – Feito isso, precisamos adicionar nosso plugin ao setup do Vue, atualize o main.js:
escola_javascript_editor/src/main.js
|
1 2 3 4 5 6 7 8 |
import Vue from 'vue' import App from './App.vue' // Plugin do quill criado import './plugins/quill_editor.js' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') |
Criando o componente do editor
Nesta parte vamos desenvolver nosso Component VueJs que vai conter nosso editor de textos.
1 – Crie o component Editor.vue:
escola_javascript_editor/src/components/Editor.vue
|
1 2 3 4 5 6 7 8 |
<template> <div class="editor"> </div> </template> <script> </script> <style> </style> |
Como o quill já foi adicionado ao main.js, não precisamos importar o vue-quill-editor no componente que acabamos de criar.
2 – Adicione o componente do quill ao Editor.vue
escola_javascript_editor/src/components/Editor.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div class="editor"> <quill-editor v-model="content" :options="editorOption" ></quill-editor> </div> </template> <script> export default { name: "Editor", data() { return { content: "", editorOption: {} }, methods: {} }; </script> <style> .quill-editor, .quill-code { width: 100%; height: 90vh; } .quill-code { height: auto; border: none; } .quill-code > .title { border: 1px solid #ccc; border-left: none; height: 3em; line-height: 3em; text-indent: 1rem; font-weight: bold; } </style> |
Você pode ler mais sobre as opções desse componente na documentação do componente.
3 – Adicione o componente editor ao App.vue:
src/App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div id="app"> <editor/> </div> </template> <script> import Editor from "./components/Editor.vue"; export default { name: "app", components: { Editor } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style> |
Configurando Toolbar do editor
Até o momento criamos o editor e adicionamos ao APP. Entretanto ainda não permitimos ao usuário interagir com o conteúdo e os diversos plugins que instalamos, nessa seção vamos adicionar a toolbar para que o usuário possa interagir com o conteúdo.
O primeiro passo para adicionar a toolbar é saber quais ferramentas do Quill queremos adicionar. Na documentação do quill você encontra alguns exemplos de toolbar. Vamos lá! 👨💻
1 – Adicione na variável “editorOption” (do component Editor.vue) o seguinte valor:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
editorOption: { modules: { toolbar: { container: [ ["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["clean"], ["link", "image", "video"] ], }, } } } |
O bloco acima é usado pelo quill para informar quais módulos serão usados e configurar alguns plugins, dentro do módulo da toolbar temos um container que diz para o quill qual a ordem e os itens da toolbar.
Como só adicionamos a toolbar, por enquanto temos apenas 1 módulo, nas próximas seções adicionaremos os demais módulos instalados anteriormente.
2 – Vamos ver como está ficando nosso editor com:
|
1 |
yarn run electron:serve |
Você deve ter algo parecido com isto:
Se você tentar adicionar uma imagem ao editor perceberá que não é possível redimensionar nem arrastar uma imagem, isso acontece porque o quill por padrão não possui suporte ao redimensionamento de imagens e drag and drop, para resolver isso iremos adicionar à configuração do quill os plugins de redimensionar imagens e arrastar imagens que foram instalados nas seções anteriores.
3 – Edite os módulos da variável editorOption para ficar assim (atualize o Editor.vue):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
export default { name: "Editor", data() { return { content: "", editorOption: { modules: { toolbar: { container: [ ["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["clean"], ["link", "image", "video"] ], }, // plugin drag and drop imageDrop: true, // plugin resize imageResize: { modules: ["Resize", "DisplaySize", "Toolbar"] }, } } }; }, methods: {} }; |
Curiosidade: O plugin de resize de imagens é dividido em sub módulos, na configuração do quill é possível usar apenas alguns dos sub módulos desse plugin.
O próximo plugin que iremos adicionar pode ser considerado indispensável para o editor, ele é o plugin de emojis 😀
4 – Para adicionar o módulo de emojis usaremos o mesmo princípio dos plugins anteriores com algumas alterações (atualize no Editor.vue):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
export default { name: "Editor", data() { return { content: "", editorOption: { modules: { toolbar: { container: [ ["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["emoji"], ["clean"], ["link", "image", "video"] ], handlers: { emoji: () => {} } }, imageDrop: true, imageResize: { modules: ["Resize", "DisplaySize", "Toolbar"] }, "emoji-toolbar": true, "emoji-shortname": true } } }; }, methods: {} }; |
Para finalizar os plugins vamos adicionar o highligh.js para deixar os blocos de código formatados pela linguagem.
5 – Adicione o highlight.js ao componente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<script> import hljs from "highlight.js"; import "highlight.js/styles/monokai-sublime.css"; export default { name: "Editor", data() { return { content: "", editorOption: { modules: { toolbar: { container: [ ["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["emoji"], ["clean"], ["link", "image", "video"] ], handlers: { emoji: () => {} } }, syntax: { highlight: text => hljs.highlightAuto(text).value }, imageDrop: true, imageResize: { modules: ["Resize", "DisplaySize", "Toolbar"] }, "emoji-toolbar": true, "emoji-shortname": true } } }; }, methods: { } }; </script> |
Adicionando ícone ao app
Nosso app ainda está muito genérico, vamos adicionar um ícone para tornar o editor da escola de javascript “único”.
No electron para adicionar um ícone ao app é necessário alterar o arquivo do processo principal “src/background.js”, esse arquivo é responsável por criar a janela e carregar a aplicação além de interagir com o sistema operacional.
Durante a instalação do plugin do Electron o Vue cli se encarregou de criar esse arquivo para nós.
Para adicionar o ícone da aplicação, primeiro precisaremos adicionar o ícone escolhido a pasta “public” e em seguida importar a biblioteca path (nativa do Nodejs), você pode baixar o ícone usado no artigo através dos links abaixo:
Observação: Dependendo do seu sistema operacional o formato da imagem deve ser diferente.
Linux: “.png” de preferência 32 x 32
Windows: “.ico” de preferência 32×32
1 – Abra o arquivo src/background.js e adicione (o path):
|
1 2 3 4 5 6 7 8 |
'use strict' import { app, protocol, BrowserWindow } from 'electron' import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib' // Adiciona a biblioteca path import path from 'path' |
2 – Após isso, dentro da função “createWindow” substitua o código:
|
1 2 3 4 5 6 |
win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) |
Por:
|
1 2 3 4 5 6 7 |
win = new BrowserWindow({ width: 800, height: 600, icon: path.join(__static, "icon-1.png"), // adiciona ícone a janela webPreferences: { nodeIntegration: true } }) |
Criando o menu do editor
Nesta seção criaremos o menu do nosso app, o electron já possui um menu nativo para aplicações que podem ser usados e criados tanto no processo renderer quanto main.
Dica: Escolha se vai utilizar a criação do menu no processo renderer ou main a partir da funcionalidade do menu, se o menu precisa interagir diretamente com o conteúdo renderizado use no renderer, caso contrário use no main.
Para nossa situação será utilizado a criação de um menu a partir do processo renderer do electron, dessa forma temos acesso ao conteúdo feito no editor para salvar posteriormente os arquivos que criarmos.
Obervação: Também poderíamos utilizar o IPC para enviar o conteúdo do editor ao processo main.
1 – No componente do nosso editor “Editor.vue” adicione os botões de abrir e salvar arquivos:
|
1 2 3 4 5 6 7 |
<template> <div class="editor"> <button @click="openFile" class="button is-small is-primary is-outlined">Abrir Arquivo</button> <button @click="saveFile" class="button is-small is-info is-outlined">Salvar Arquivo</button> <quill-editor v-model="content" :options="editorOption"></quill-editor> </div> </template> |
2 – Perceba que já adicionamos os métodos de ação “openFile” e “saveFile”. Feito isso, adicione os métodos ao componente Editor.vue, ao final seu componente deve estar assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<template> <div class="editor"> <button @click="openFile" class="button is-small is-primary is-outlined">Abrir Arquivo</button> <button @click="saveFile" class="button is-small is-info is-outlined">Salvar Arquivo</button> <quill-editor v-model="content" :options="editorOption"></quill-editor> </div> </template> <script> import hljs from "highlight.js"; import { remote } from "electron"; import "highlight.js/styles/monokai-sublime.css"; import "bulma/css/bulma.min.css"; import fs from "fs"; export default { name: "Editor", data() { return { content: "", editorOption: { modules: { toolbar: { container: [ ["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], [{ list: "ordered" }, { list: "bullet" }], [{ script: "sub" }, { script: "super" }], [{ indent: "-1" }, { indent: "+1" }], [{ direction: "rtl" }], [{ size: ["small", false, "large", "huge"] }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ font: [] }], [{ color: [] }, { background: [] }], [{ align: [] }], ["emoji"], ["clean"], ["link", "image", "video"] ], handlers: { emoji: function() {} } }, syntax: { highlight: text => hljs.highlightAuto(text).value }, imageDrop: true, imageResize: { modules: ["Resize", "DisplaySize", "Toolbar"] }, "emoji-toolbar": true, "emoji-shortname": true } } }; }, methods: { openFile() { // Abre arquivo }, saveFile() { // Salva arquivo } } }; </script> <style> .quill-editor, .quill-code { width: 100%; height: 90vh; } .quill-code { height: auto; border: none; } .quill-code > .title { border: 1px solid #ccc; border-left: none; height: 3em; line-height: 3em; text-indent: 1rem; font-weight: bold; } button { margin: 5px 5px 5px 5px; } </style> |
Adicionando a função abrir arquivo
Nesta seção iremos adicionar a função de abrir arquivos em um formato criado para o nosso editor “.escola_js”. Para isto usaremos a api remote do electron, que permite utilizar apis típicas do processo main no processo renderer, também utilizaremos a biblioteca “fs” do Nodejs para abrir os arquivos.
1 – No método openFile, adicione o seguinte código:
|
1 2 3 4 5 6 |
openFile() { // Abre seletor de arquivos const [filepath] = remote.dialog.showOpenDialog({ properties: ["openFile"] }); }, |
A função showOpenDialog, permite ao usuário abrir o seletor de arquivos e selecionar o arquivo que deseja abrir, nela podem ser configuradas propriedades que limitam o que se pode abrir: um arquivo, uma pasta ou múltiplos arquivos. Uma vez selecionado o arquivo a função retorna um array com os paths dos arquivos selecionados.
Atenção: Mesmo que apenas um arquivo seja selecionado, a função retorna um array com o caminho deste 1 arquivo.
Para tornar nosso código mais legível, perceba que a variável filepath faz um array destructuring . Desta forma não precisamos colocar algo to tipo:
|
1 2 3 4 |
const filepath = remote.dialog.showOpenDialog({ properties: ["openFile"] }); // retorna ["path/to/arquivo.txt"] console.log(filepath[0]) // "path/to/arquivo.txt" |
Como já temos o caminho do arquivo que se deseja abrir, podemos usar a função “fs.readFile()” para ler o arquivo e adicionar o conteúdo ao editor.
2 – Adicione o código abaixo após a declaração da variável filepath, ao final você deve ter algo parecido com isto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
openFile() { const [filepath] = remote.dialog.showOpenDialog({ properties: ["openFile"] }); const context = this; /* Verifica se o usuário não selecionou nenhum arquivo ou selecionou um formato de arquivo não suportado */ if (filepath === undefined || !filepath.includes(".escola_js")) { alert("Nenhum arquivo selecionado ou formato não suportado."); return; } fs.readFile(filepath, "utf-8", (err, data) => { if (err) { alert("Um erro ocorreu ao abrir arquivo:" + err.message); return; } // Adiciona o conteúdo do arquivo ao editor context.content = data; }); }, |
Curiosidade: Nesta função não foi utilizada a função fs.readFileSync porque como ela é síncrona o processo renderer ficaria parado enquanto executa a função, para pequenos arquivos isso é imperceptível, mas à medida que os tamanhos dos arquivos aumentam chegaria ao ponto da aplicação travar.
Nosso editor está ficando funcional, Na próxima seção será adicionado suporte a abertura de arquivos no formato “.escola_js”
Adicionando a função salvar arquivo
Para adicionar a função salvar em nosso app, utilizaremos funções parecidas as usadas na seção anterior: “showOpenDialog”, “readFile”. A primeira delas é a função “showSaveDialog” que permite abrir uma caixa de salvar arquivo, quando o usuário clicar nessa caixa, ele poderá selecionar o caminho (ou arquivo existente), adicionar o nome do arquivo (se ele não existe ainda) e salvar.
Também usaremos a função fs.writeFile() para salvar os arquivos no formato “.escola_js”.
1 – Crie o método saveFile abaixo do método openFile e adicione o seguinte código:
|
1 2 3 4 5 6 7 8 9 10 |
saveFile() { const filenameToSave = remote.dialog.showSaveDialog(); /* Verifica se o arquivo contém formato suportado e adiciona ao nome do arquivo o formato .escola_js */ const filePathToSave = filenameToSave.includes(".escola_js") ? filenameToSave : `${filenameToSave}.escola_js`; fs.writeFile(filePathToSave, this.content, err => { if (err) throw err; alert("Arquivo salvo com sucesso!"); }); }, |
Como a função showSaveDialog retorna apenas uma string contendo o caminho do arquivo a salvar ou sobrescrever não foi necessário fazer um array destructuring. Nosso editor apenas suporta o formato “.escola_js”, então todo arquivo escrito é adicionado no formato mencionado.
Para evitar que ao sobrescrever um arquivo “.escola_js” o editor adicione novamente o formato, na variável filePathToSave foi adicionado uma condição que checa se o arquivo já possui o formato “.escola_js”.
Foi uma caminhada longa, mas nosso editor está pronto 😎!
Empacotando o app
Quando se fala em distribuir APPs para desktop, diversos problemas começam a surgir: auto update, certificado de assinatura de código, compilar multiplataforma, etc. Por sorte temos o pacote electron-builder que ajuda a compilar o APP para diversa plataformas.
Para empacotar nosso APP, vamos utilizar a própria integração do plugins vue-electron-builder que foi instalada para gerar a integração electron e vue.
1 – Coloque no nó principal do seu package.json o autor e o link para a Homepage do APP (pode ser fictícia se for um APP de teste apenas):
|
1 2 |
"author": "seu nome <seu-nome@gmail.com>", "homepage": "https://seu-site.com", |
Obs: Você pode conhecer mais opções de configurações aqui: https://www.electron.build/configuration/configuration#Metadata-homepage
2 – Abra a vue ui e selecione o item tasks:
|
1 |
vue ui |
Aqui ficam todas as tasks registradas no package.json, iremos utilizar a task “electron:build” para gerar nosso instalável.
Podemos definir os parâmetros de build (clicando em parâmetros), para mudar o formato final do executável (escolhendo a versão do OS que queremos gerar o executável, se é 32 ou 64 bits e etc):
3 – Depois de escolher as configurações desejadas clique em Executar Tarefa para gerar as versões instaláveis do seu APP.
4 – Pronto, seu APP está disponível dentro da pasta dist_electron e já pode ser instalado o/
Um desafio para você
Para fixar o conhecimento adquirido nesse tutorial, realiza o seguinte desafio: Quando o usuário pressionar Ctrl + S, salve o conteúdo atual no arquivo aberto, ou abra a janela para que o usuário crie um novo arquivo caso nenhum arquivo esteja aberto.
Cole o código desenvolvido nos comentários após finalizar para que outros programadores aprendam com a sua solução, bom trabalho o/
Conclusão
Neste artigo podemos vislumbrar o poder e a praticidade do framework Javascript Electron através da criação de um editor de textos instalável no desktop usando Electron, VueJs, Quill Editor e Bulma.
Se você gostou deste conteúdo e quer aprender mais sobre electron (ou outro tema no mundo javascript) deixa um comentário ai em baixo, também compartilha esse artigo com seus amigos programadores para incentivar a continuação deste trabalho.
Muito obrigado o/
Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀
Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma,
Javascript e Es6+) até React e ExpressJs totalmente do zero!
Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá
aprender como conseguir as melhores vagas no módulo carreira de Programador.
Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪
E ai Thiago, beleza?
Obrigado por acompanhar o nosso tutorial,
Para ver a versão de desenvolvimento basta rodar: yarn run electron:serve
Porém para instalar e acessar a versão de produção, depois de ter gerado ela em dist_electron você deve ir até essa pasta e rodar o comando para instalar (se você nas configurações gerou um .deb você pode instalar rodando dpkg -i nome_do_projeto_no_pacote).
Grande abraço
Very good tutorial!
Comigo ao rodar o passo da parte.: Configurando Toolbar do editor.
Aparece essa mensagem para mim direto.:
error Command “electron:serve” not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Alguém podeira me auxiliar como corrigir esse erro, desde já agradecido.
E aiii, tudo bem?
Você adicionou o plugin (vue-cli-plugin-electron-builder) como no passo 6?
Oi Leonardo.
Sim sim, fiz em um primeiro momento. Acabei descobrindo o erro.
Por algum motivo na instalação ele não fez e fui instalar via linha de comando.
Mas pela UI do Vue ele faz algumas coisas a mais, então por isso não tinha dado certo.
Mas mesmo assim muito obrigado pela atenção.
na hora de rodar o comando “yarn run electron:serve” ele deu erro no yarn, claro, não tenho yarn, instalei via npm no windows…. qual comando devo executar no lugar? Já adianto que “npm run electron:serve” não funciona
Opa e ai Luciano, como vai?
Qual erro você está recebendo?
Eu entendi já, é só digitar o comando: yarn run electron:serve
Para executar o app