Electron js ile masaüstü bir program yazmak için html ve css kullanılıyor, hal böyleyken projeyi ve kodlamayı daha reaktif bir yapıya döndermek için vuejs ile bir araya getirmek istedim.

hali hazırda vue ile olan bir proje için alttaki işlemleri uygulayabilirsiniz, sıfırdan bir proje için safanın altlarına doğru yeni bir proje oluşturmak isimli başlığın altında daha temiz ve uğraştırmayan 3 komuttan oluşan adımlarıda ekledim

ilk olarak vue ile bir proje oluşturdum.

vue create electron-project

serve ve build ederek ekranıma geldiğini gördüm ve electron'u hem kurulumu hemde ayarlarını yapmak için

npm install electron --save-dev

komutu ile electronun son versiyonunu çekip package.json dosyama eklettim.

normalde electron ile bir proje oluşturulduğun da kendisi bizim main.js dosyamızı oluşturuyor fakat bu işlemden sonra bunu manuel bir şekilde uygulamam gerekli onun için ilk önce main.js dosyamı alttaki gibi oluşturdum.

main.js

const { app, Menu, BrowserWindow, globalShortcut } = require('electron');
const path = require('path');
const url = require('url');
const os = require('os');

let win;

function createWindow () {
    win = new BrowserWindow({ 
        minimizable :true,
        maximizable :true,
        width: 800, 
        height: 600,
        icon: path.join(__dirname,'public/favicon.ico')
    });

    //vuejs dist klasörü içerisindeki index.html
    win.loadFile('dist/index.html');

    //ilk açılışta dev tool gelmememesi için bunu yorum satırı haline getirin
    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null
    });

    //pencere menusunu kapatıyorum
    Menu.setApplicationMenu(null);
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

Yukardaki kodlar hemen hemen electron döküman sayfasındaki ile aynı, perk bir fark yok. Benim eklediklerim window objesinde vue favicon ekledim, loadFile methoduna vuejs build edildikten sonraki dist klasörü içerisinde oluşturduğu html dosyasını hedef gösterdim.

package.json dosyamda electron için eklemeleri alttaki gibi yaptım

// ...
"main": "main.js",
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "vue-cli-service build; electron .",
    "start": "electron ."
},
// ...

vuejs tarafında yapılan değişiklikleri build edip uygulamamızı başlatması için alttaki kodu

npm run electron

vujs en son hali ile uygulamayı başlatmak için

npm run start

komutları ile uygulamamızı başlatabiliriz fakat çalışmayacaktır, bunun sebebi vuejs css ve js dosyasılarının yollarını nasıl tanımladığı ile alakalı. Bu durumu aşmak için webpack yerine vue js içerisinden çözümlemek için src klasörü yanına vue.config.js isminde bir dosya oluşturup

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

şeklinde assets dosya yollarını tanımlama durumunu değiştirdim.

sonuç en basit hali ile electron masaüstü uygulamama vuejs dahil etmiş oldum.

Yeni bir proje oluşturmak

Vue.js ile mümkün olduğunca basit çalışmak için Vue CLI adlı bir araç kullanıyoruz. Henüz sisteminizde yüklü değilse, bunu aşağıdaki komutla yapabiliriz.

npm install -g @vue/cli

Vue CLI sayesinde projeyi kolayca hazırlayabiliriz. Bunu yapmak için aşağıdaki komutu giriyoruz:

vue create electron-app

Son parametre (“electron-app”) projenizin adıdır. Vue CLI, aynı ada sahip bir klasör oluşturur.

vuex, router, eslint gibi kullanmak istediğiniz yapıları seçip devam edin.

kurulum yapıldıktan sonra electron-app klasörümüze giriş yapalım

cd electron-app

electron yükleyiciyi vue projemize eklemek için

vue add electron-builder

Elektron-oluşturucuyu kurarken sizden bir Elektron sürümü seçmeniz istenecektir, en sonuncuyu seçmeniz yeterlidir. Bundan sonra ek bir komut var:

npm run electron:serve

ve uygulamamız electron içerisinde açılacaktır.

vue src klaösrü içerisinde background.js isminde bir javascript dosyası mevcut aslında bu electron main.js dosyasıdır.