Electorn js ile vuejs kullanımı

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.

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.

Burda ara