DEV Community

Cover image for Aprendendo do zero a criar uma aplicação desktop com JavaScript, Electron Js e Vue.Js
Gustavo Nascimento
Gustavo Nascimento

Posted on • Updated on

Aprendendo do zero a criar uma aplicação desktop com JavaScript, Electron Js e Vue.Js

Fonte de Estudos: Casa do Código
Livro: VueJs Construa Aplicações Incríveis

  • Instalando o CLI do Vue.Js em modo Global
npm i -g @vue/cli
  • Criando um projeto Vue.Js
vue create <nome do app>
  • Iniciando um servidor no Vue.Js
npm run serve
  • Na instalação vai aparecer a pergunta abaixo. Eu costumo deixar em "default" e pressionar ENTER.
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)  
  Manually select features 
  • Logo em seguida vai começar a instalação do repositório git e a instalação do CLI plugins conforme abaixo.
Vue CLI v4.3.1
✨  Creating project in /mnt/c/Users/Fantasma/Desktop/web/VueJs/teste.
🗃  Initializing git repository...
> ejs@2.7.4 postinstall /mnt/c/Users/Fantasma/Desktop/web/VueJs/teste/node_modules/ejs
> node ./postinstall.js

added 1195 packages from 852 contributors and audited 25249 packages in 292.71s

40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

�🚀  Invoking generators...
�📦  Installing additional dependencies...

added 54 packages from 39 contributors and audited 25532 packages in 54.138s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project teste.
�👉  Get started with the following commands:

 $ npm run serve
  • Acesse a pasta do projeto criado.
$ cd teste
  • Instalando a Lib Vuetify (Eu deixo como Default(recomendado))
vue add vuetify
  • Instalando o electron ao seu projeto
vue add electron-builder

Obs: Quando estiver instalando vai fazer as seguintes perguntas abaixo. Usei a versão 5.0.0

? Still proceed? (y/N) Yes
? Choose Electron Version (Use arrow keys)
4.0.0
5.0.0
6.0.0

Top comments (0)