使⽤electron-vue搭建桌⾯应⽤开发模板
参考 搭建符合本公司需求的桌⾯应⽤开发模板
已实现功能：
1.单⾏命令即可⽣成可安装程序
2.使⽤ nsis 构建安装向导
3.实现⽂件的读写功能
4.窗⼝的最⼩化按钮和关闭按钮以及标题栏⾃定义，不使⽤ electron ⾃⾝携带的原⽣标题栏
5.窗⼝关闭保存到托盘
6.托盘右键菜单有'关于本产品'...菜单
7.使⽤说明可在独⽴窗⼝中打开，且是以本地 pdf 形式
8.使⽤ nsis 制作安装向导，实现证书⾃动安装
实现过程：
1.单⾏命令即可⽣成可安装程序
构建项⽬的时候选择 electron-builder ，执⾏ npm run build 之后⾃动打包成 可安装⽂件
2.使⽤ nsis 构建安装向导
参考的‘如何利⽤ nsis 制作 electron 的安装包’即可，electron-builder 插件也有 nsis 配置项，但是局限性有点⼤且不可控3.实现⽂件的读写功能
// 在 js 中定义 files 读写⽂件
import path from "path";
import fs from "fs-extra";
import { app, remote } from "electron"; // 引⼊remote模块
const APP = pe === "renderer" ? remote.app : app; // 根据pe来分辨在哪种模式使⽤哪种模块
const STORE_PATH = Path("userData"); // 获取electron应⽤的⽤户⽬录
if (!fs.pathExistsSync(STORE_PATH)) {
// 如果不存在路径
fs.mkdirpSync(STORE_PATH); // 就创建
}
export const files = {
read: function(filesName) {
const path_ = path.join(STORE_PATH, filesName);
let filesData = fs.readFileSync(path_, "utf-8", function(e, data) {
if (e) throw e;
return data;
});
return filesData;
},
write: function(filesName, writeStr) {
const path_ = path.join(STORE_PATH, filesName);
fs.open(path_, "w", function(e, fd) {
if (e) throw e;
fs.write(fd, writeStr, 0, "utf8", function(e) {
if (e) throw e;
fs.closeSync(fd);
});
});
}
};
调⽤：
import { files } from "@/scripts/fileOpera.js";
const {
ipcRenderer
} = quire("electron")
export default {
name: "landing-page",
data() {
return {
filesData:''
};
},
methods: {
writeFile: function() {  // 写⼊ ⽂件
files.write(
"/",
'write some to test'
);
},
readFile: function() {  // 读取 ⽂件
this.filesData = ad("/");
},
openUseDirections: function(){  // render 进程与 main 进程交互打开使⽤说明窗⼝
ipcRenderer.send("openUseDirections");
}
}
};
4.窗⼝的最⼩化按钮和关闭按钮以及标题栏⾃定义，不使⽤ electron ⾃⾝携带的原⽣标题栏
⾸先在创建窗⼝的时候需要把 frame 配置项设置为 false，其次在 App.vue 组件中⾃定义标题栏以及右侧按钮HTML
<template>
<div id="app">
<div class="fake-title-bar">
<div class="title-mark">
<img src="../../static/menubar-nodarwin.png" />
标题
</div>electron vue教程
<div class="handle-bar" v-if="os === 'win32'">
<Icon type="minus" @click="minimizeWindow"></Icon>
<Icon type="close" @click="closeWindow"></Icon>
</div>
</div>
<router-view></router-view>
</div>
</template>
JS
<script>
import { remote } from "electron";
import { myMixin } from './mixins/test'
const { BrowserWindow } = remote;
import {time_differ, toISOString, formatDate} from '@/scripts/times.js'
export default {
name: "buildertest",
mixins: [myMixin],
data() {
return {
os: ""
};
},
created() {
this.os = process.platform;
},
methods: {
minimizeWindow() {
const window = FocusedWindow();
window.minimize();
},
closeWindow() {
const window = FocusedWindow();
window.close();
}
}
};
</script>
STYLES
<style lang='less'>
#app {
.fake-title-bar {
-webkit-app-region: drag;
height: h = 24px;
color: #2c2c2c;
font-size: 12px;
line-height: h;
line-height: h;
width: 100%;
border-bottom: 1px solid #d8d8d8;
position: fixed;
z-index: 100;
.title-mark {
position: absolute;
left: 4px;
top: 0;
z-index: 10000;
padding-left: 26px;
img {
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
height: 20px;
}
}
.handle-bar {
position: absolute;
top: 2px;
right: 4px;
width: 40px;
height: h;
z-index: 10000;
-webkit-app-region: no-drag;
i {
cursor: pointer;
font-size: 16px;
}
.ivu-icon-minus {
margin-right: 6px;
&:hover {
color: #409EFF;
}
}
.ivu-icon-close {
&:hover {
color: #F15140;
}
}
}
}
.writeFile {
position: absolute;
top: 40px;
font-size: 14px;
}
}
</style>
5.窗⼝关闭保存到托盘
6.托盘右键菜单有'关于本产品'...菜单
// 定义 isQuit 变量存储当前关闭是窗⼝触发还是右键托盘退出菜单触发
// 定义 isQuit 变量存储当前关闭是窗⼝触发还是右键托盘退出菜单触发
let isQuit = false; // 默认是从窗⼝触发
// 创建托盘菜单
function createTray() {
const menubarPic =
process.platform === "darwin"
`${__static}/menubar.png`
: `${__static}/menubar-nodarwin.png`;
tray = new Tray(menubarPic);
contextMenu = Menu.buildFromTemplate([
{
label: "关于",
click() {
dialog.showMessageBox({
title: "xxx",
message: "xxx",
detail: `版本: ${pkg.version}\n`
});
}
},
{
label: "打开",
click() {
if (mainWindow === null) {
createWindow();
mainWindow.show();
mainWindow.maximize();
} else {
mainWindow.show();
mainWindow.maximize();
}
}
},
{
label: "退出",
click: function() {
isQuit = true;
app.quit();
app.quit(); // 程序设定关闭为最⼩化，所以调⽤两次关闭，防⽌最⼤化时⼀次不能关闭      }
}
]);
// 设置此托盘图表的悬停提⽰内容
tray.setToolTip("xxx产品名称");
<("right-click", () => {
tray.popUpContextMenu(contextMenu);
});
<("click", () => {
if (mainWindow === null) {
createWindow();
mainWindow.show();
mainWindow.maximize();
} else {
mainWindow.show();
mainWindow.maximize();
}
});
}
// 监听关闭事件
<("close", function(event) {
if (!isQuit) {
event.preventDefault();
mainWindow.hide();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。