前言
公司的项目的文档中心是使用markdown进行编写的，加入了许多自定义的内容与规则，为了使运营人员方便编写文档，所以启动了这个项目。
源码
github.com/903529487/m… 欢迎star
开始
该项目对md,json文件直接进行编辑，所以不需要使用数据库和server，渲染进程使用vue + element-ui构建页面，主进程里使用node进行处理。
Electron的渲染进程相当一个浏览器，不能使用node服务，Electron的主进程就可以使用node服务，所以我们可以利用Electron ipcMain 模块对主进程和渲染进程之间发送和处理消息，可以模拟接口的发送接收处理。
例如：
在主进程中：
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.reply('asynchronous-reply', 'pong')
})
在渲染进程中，可以直接触发主进程的asynchronous-message事件：
const { ipcRenderer } = require('electron')
// 这个是主进程处理完毕，渲染进程会被触发，获取主进程传过来的参数
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping'); //向主进程发起事件，在此处可以传参数
然后我们就可以在主进程里，使用node进行文件流编辑了。
运行
git clone https://github.com/903529487/markdown-edit-electron
npm install
// 调试，开发
npm run dev
npm run start
// 打包
// window
npm run build //打包vue
npm run distWin //生成安装包
// mac
npm run build
npm run distMac
项目目录
client ————————vue-cli打包的目录
dist ——————————electron生成安装文件的目录
electron ———————— electron源码
index.js ——————————electron入口
src —————————— vue源码
public —————————— vue-cli3资源
...
...
package.json
package.json
{
"name": "vue-manage-system",
"version": "1.1.0",
"private": true,
"main": "./electron/main.js",
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "cross-env NODE_ENV=development electron .",
"distWin": "cross-env NODE_ENV=production ./node_modules/.bin/electron-rebuild && npx electron-builder --win --x64",
"distMac": "cross-env NODE_ENV=production ./node_modules/.bin/electron-rebuild && npx electron-builder --mac --x64"
},
"build": {
"productName": "md编辑器",
"win": {
"icon": "logo.ico"
},
"mac": {
"icon": "logo2.ico"
}
},
"dependencies": {
"axios": "^0.18.0",
"cheerio": "^1.0.0-rc.3",
"child_process": "^1.0.2",
"element-ui": "^2.4.11",
"file-system": "^2.2.2",
"html-entities": "^1.2.1",
"html2markdown": "^1.1.0",
"js-pinyin": "^0.1.9",
"marked": "^0.7.0",
"mavon-editor": "^2.7.7",
"node-dir": "^0.1.17",
"qs": "^6.8.0",
"sass-loader": "^8.0.0",
"v-contextmenu": "^2.8.1",
"vue": "^2.5.21",
"vue-cropperjs": "^3.0.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-runtime-helpers": "^1.1.2",
"vue-schart": "^1.0.0",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.1"
},
"devDependencies": {
"core-js": "^2.6.11",
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"babel-polyfill": "^6.26.0",
"cross-env": "^6.0.3",
"electron": "7.1.2",
"electron-rebuild": "^1.8.8",
"node-sass": "^4.12.0",
"vue-template-compiler": "^2.5.21"
}
}
electron的入口 electron/main.js，在main.js下启动了服务和显示的页面。
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
var child_process = require('child_process');
var exec = child_process.exec;
const api = require('./api/index.js')
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {
javascript: true,
plugins: true,
nodeIntegration: true, // 是否集成 Nodejs
webSecurity: false,
preload: path.join(__dirname, './renderer.js')
},
// autoHideMenuBar:true,
frame:false,
// transparent: true,
})
if(process.env.NODE_ENV === 'development'){
mainWindow.loadURL(`http://localhost:8082`)
}else{
mainWindow.loadFile('./client/index.html')
}
mainWindow.on('closed', () => {
mainWindow = null
})
new api(mainWindow);
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process && process.platform !== 'darwin') {
app.exit();
exec('taskkill /f /t /im node.exe', function (error, stdout, stderr) {
if (error) {
console.log(error.stack);
console.log('Error code: ' + error.code);
return;
}
console.log('使用exec方法输出: ' + stdout);
console.log(`stderr: ${stderr}`);
});
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
icon配置
"build": {
"productName":"md编辑器", // 应用名称
"win": {
"icon": "logo2.ico"
},
"mac": {
"icon": "logo2.ico"
}
},
electron-builder打包注意事项
运行 npm run distWin 命令时，electron需要下载许多的依赖，由于需要下载的内容需要国外vpn而且内容挺大有60m左右，国外vpn也网速也不行，往往都是下载失败报错。所有我们得手动下载。
访问 github.com/electron/el…
选择你的electron版本对应的包，我的是7.1.2版本，所以下载
electron-v7.1.2-win32-x64.zip
electron-v7.1.2-mas-x64.zip
注：可以使用迅雷等第三方下载工具。
下载完成，两个系统的存放文件路径不一样，把压缩包放到
windows
C:\Users\*****\AppData\Local\electron-builder\cache\winCodeSign
macOs ~/Library/Caches/electron
最后
npm run distWin
npm run distMac
进行文件打包。
