练手的项目，需求简单，打算做平面设计社交类的软件。
一、需求
练手用，简单处理，写个简单的记事本，本地保存txt，能导出为其他格式的文件。
获取用户的网卡地址用于数据加密，本地保存加密后的文件，导出为明文数据。
可以选择系统样式、自定义日志路径,可见软件信息（版本等）。
二、涉及vue插件
vue 使用版本2；vue-router 使用 3；vuex 使用 3.6.2。
npm install vue-router@3
npm install vuex@3.6.2
npm view 名字 versions --json //查看版本
npm view 名字 version --json //查看最新版本
npm install vue2-editor //富文本框
npm install vant@latest-v2//vant三、涉及api使用
果然呀，不出bug都没啥可写的。前端基础不好，有bug要调好久……
1、工具栏菜单
这个按照官网写就好，网址：Menu | Electron
不会报啥错，但是项目结果可以改下。
项目结构：
-dist //编译后的vue文件
-electron //electron相关文件
menu.js //菜单设置 electron的main.js 引入
-src //vue文件
-static //存放静态文件
electron_common.js //vue中关于electron的js
//这文件中不要引入electron 有可能报错 反正我是不会改……
main.js //vue入口文件
preload.js //主线程和渲染线程桥接文件
mian.js //electron入口文件
//electron main.js
const { app,BrowserWindow,ipcMain,Menu, ipcRenderer } = require('electron');
const path = require('path');
const url = require('url');
//引入主进程操作js
require('./electron/menu')//工具栏菜单
let mainWindow;
function createWindow() {
……
}
//menu.js 菜单模板官网上有
const { Menu } = require('electron');
//设置菜单
const template =[
……
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);2、右键菜单
这菜单调了好久……但道理其实挺简单。
先说官网:Menu | Electron
按照官网这个教程，联系它的前后文，renderer是被index.html调用，在vue2项目中应该是引入到app中的，在public/index.html中引入不知是否可行，没试过。
在我这个例子中相当于./src/static/electron_common.js,在vue的main.js中应该是./static/electron_common.js,/src/main.js中"./"指的是"/src/"。
使用ipcRenderer需要引入electron,vue编译的时候回报“fs”找不到，查了下原因，大概是node的问题，需要再做配置。试了几个，都是各种报错。我一个主要写后端的……前端基础不好真心头大。
然后根据electron最基础的教程中俩线程的交互，设置main.js监听，终于正常使用，代码如下。文章来源：https://www.toymoban.com/news/detail-459613.html
//./src/static/electron_common.js
export const rightclick = async () => {
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
window.electronAPI.rightclick()
})
}
//./src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueEditor from 'vue2-editor';
import { rightclick } from "./static/electron_common" //加载
rightclick()//运行
Vue.config.productionTip = false
Vue.use(VueEditor);
new Vue({
render: h => h(App),
}).$mount('#app')
//./preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
//test: () => ipcRenderer.invoke('test'),
rightclick: () => ipcRenderer.invoke('right_click')
})
//./main.js
const { app,BrowserWindow,ipcMain,Menu, ipcRenderer } = require('electron');
const path = require('path');
const url = require('url');
//引入主进程操作js
require('./electron/menu')//工具栏菜单
let mainWindow;
function createWindow() {
// 创建一个窗口，大小 800 * 600
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences:{
nodeIntergration:true,
preload:path.join(app.getAppPath(),"preload.js")
}
});
//ipcMain.handle('test', () => "qweqwe")
mainWindow.loadFile('index.html')
mainWindow.loadURL(url.format({
pathname: path.join(app.getAppPath(),'dist/index.html'),
protocol: 'file:',//协议
slashes: true//slashes属性为布尔值，如果协议protocol冒号后根的是两个斜杠（/），那么值为true
}));
// 自动打开调试台
mainWindow.webContents.openDevTools({detach: true });
mainWindow.on("closed",function(){
mainWindow = null;
})
}
//监听
ipcMain.handle('right_click', (event) => {
const template = [
{
label:"复制",
click:()=>{
}
},
{
label:"粘贴",
click:()=>{
}
}
]
const menu = Menu.buildFromTemplate(template)
menu.popup(BrowserWindow.fromWebContents(event.sender))
})
//启动应用加载
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
})
app.on('activate', function () {
if (mainWindow === null) createWindow();
});然后每次改完 都要先编译（npm run build）在运行（npm run start）,有点麻烦文章来源地址https://www.toymoban.com/news/detail-459613.html
到了这里，关于新星计划 Electron+vue2 桌面应用 2 项目编写的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
