Electron-vue
O que é?
Electron é um framework para criar aplicações desktop nativas usando tecnologias como JavaScript, HTML e CSS. O Electron-vue é este framework com o poder do Vue.js.
Como usar?
Recomenda-se instalar o wine se o desenvolvimento da aplicação não for feito no Windows. Wine é uma camada de compatibilidade que dá a capacidade de rodar aplicações Windows em vários sistemas operacionais, como Linux, Mac OSX e BSD.
Para instalar o wine no Mac:
brew cask install xquartz
brew install wine
Para instalar o wine no Linux (debian based):
apt-get install wine
Após ter o wine instalado, basta instalar o electron e o vue-cli. Use o vue-cli para criar o projeto electron-vue.
npm install electron vue-cli -g
vue init simulatedgreg/electron-vue hello-electronvue
Feito isso, entre no diretório e instale as dependências.
cd hello-electronvue
npm install
npm run dev
Quando o comando run dev for executado, uma janela como a abaixo será mostrada.
Para gerar os executáveis (build) da aplicação criada:
npm run build
Se deseja criar um executável específico para uma plataforma, execute o comando abaixo:
npm run build:PLATAFORMA
Onde PLATAFORMA pode ser:
- darwin (OS X)
- mas (OS X)
- linux
- win32
Todos os executáveis serão gerados e colocados no diretório build.
Dois package.json
Electron-vue tem dois arquivos package.json separados. O primeiro, que está na raíz do projeto, contém as dependências do próprio Electron, como por exemplo, os plugins que fazem interface com os sistemas operacionais. O segundo package.json, que encontra-se no diretório app, contém as dependências da aplicação sendo desenvolvida, como o próprio vue.js, vuex, entre outros.
Recomenda-se manter os arquivos separados. Quando uma build for criada, o Electron-vue saberá empacotar e criar os executáveis da maneira correta.
vuex e vue-router
O vuex e o vue-router já vêm pré-instalados no electron-vue. A estrutura padrão deste projeto é que, cada página deve ter um componente pai e um diretório onde componentes filhos serão declarados. Veja o exemplo da estrutura abaixo:
app
├── src
├── App.vue
├── components
│ ├── LandingPageView
│ │ ├── CurrentPage.vue
│ └── LandingPageView.vue
No caso acima, temos uma página chamada LandingPageView.vue e esta possui um diretório com mesmo nome onde componentes filhos são declarados.
Suponha que eu queira criar uma página Electron-vue nova chamada ShoppingPageView. Para isso, eu criaria um componente pai chamado ShoppingPageView.vue na raíz do diretório components e criaria outro diretório chamado ShoppingPageView, que conteria todos os outros componentes que constituem a página ShoppingPageView.vue que possuo. Logo, a estrutura de arquivos ficaria desta forma:
app
├── src
├── App.vue
├── components
│ ├── ShoppingPageView
│ │ ├── Listing.vue
│ ├── ShoppingPageView.vue
│ ├── LandingPageView
│ │ ├── CurrentPage.vue
│ └── LandingPageView.vue
Esta foi a primeira vez que usei o Electron e já comecei usando-o com o Vue.js instalado. Todo o processo de instalação, desenvolvimento e de gerar uma build do projeto foi feito com muita facilidade e sem dores de cabeça. Não usei este framework como um projeto que será lançado em produção, porém, brincar e conhecer uma tecnologia nova foi uma grande experiência.
Este artigo foi criado somente para demonstrar o framework em questão, visto que, qualquer desenvolvedor que saiba vue.js e vuex conseguirão escrever aplicações Electron-vue com muita facilidade. Porém, em breve pretendo escrever um artigo para criar uma aplicação simples.