Electron-Vue入門Demo
2972 ワード
前提条件として、Electronフレームワークが正常に動作する(electron環境の構成は本明細書で説明する部分ではない)1、vueの環境モジュールをインストールする
2,vueエンジニアリングの初期化
3,config/indexを修正する.jsのパラメータ
4、コンパイル工事を実行する
5,コンパイルが完了するとdistフォルダが1つ多く出て、後ろのelectronに必要なファイルmain.jsとpackage.jsonはdistにmainを追加する.js
package.json
6.electronプロジェクトを実行し、distディレクトリに入り、次のコマンドを実行します.
OK、大成功!
npm install -g vue-cli
2,vueエンジニアリングの初期化
vue init webpack demo
Install vue-router? yes
Use ESLint to lint your code? no
Set up unit tests no
Setup e2e tests with Nightwatch? no
3,config/indexを修正する.jsのパラメータ
port:8080
autoOpenBrowser:true
assetsPublicPath: './'
4、コンパイル工事を実行する
npm run dev
npm run build
5,コンパイルが完了するとdistフォルダが1つ多く出て、後ろのelectronに必要なファイルmain.jsとpackage.jsonはdistにmainを追加する.js
const {app, BrowserWindow} =require('electron');// electron
let win;
let windowConfig = {
width:800,
height:600
};//
function createWindow(){
win = new BrowserWindow(windowConfig);//
win.loadURL(`file://${__dirname}/index.html`);// index.html index.html
win.webContents.openDevTools(); //
win.on('close',() => {
// BrowserWindow
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
package.json
{
"name": "demo",
"productName": " ",
"author": " ",
"version": "1.0.4",
"main": "main.js",
"description": " ",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [
{
"from": "./static/xxxx/",
"to": "app-server",
"filter": [
"**/*"
]
}
],
"publish": [
{
"provider": "generic",
"url": "http://xxxxx/download/"
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",
"electron-updater": "^2.22.1"
}
}
6.electronプロジェクトを実行し、distディレクトリに入り、次のコマンドを実行します.
electron .
OK、大成功!