preface
The documentation center of the company’s project was written using Markdown, adding a lot of custom content and rules. The project was started to make it easier for the operations staff to write the documentation.
The source code
Github.com/903529487/m… Welcome to star
start
In this project, MD and JSON files are edited directly, so there is no need to use database and server. The rendering process uses Vue + element-UI to build the page, and node is used for processing in the main process.
The render process of Electron is like a browser and cannot use the Node service, while the main process of Electron can use the Node service. Therefore, we can use the Electron ipcMain module to send and process messages between the main process and the render process, which can simulate the sending and receiving processing of the interface.
Such as:
In the main process:
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message'.(event, arg) = > {
console.log(arg) // prints "ping"
event.reply('asynchronous-reply'.'pong')})Copy the codeIn the renderer process, the main process’s ados-message event can be triggered directly:
const { ipcRenderer } = require('electron')
// When the main process is finished, the renderer process will be triggered to retrieve the parameters passed by the main process
ipcRenderer.on('asynchronous-reply'.(event, arg) = > {
console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message'.'ping'); // Initiates an event to the main process, where parameters can be passed
Copy the codeWe can then use Node to stream files in the main process.
run
Git clone https://github.com/903529487/markdown-edit-electron NPM install / / debugging, NPM run dev NPM run start // package // window NPM run build // package vue NPM run distWin // MAC NPM run build NPM run distMacCopy the codeProject directory
Client -- -- -- -- the vue - cli packaged dist directory -- -- -- -- -- electron generation installation file directory electron -- -- -- -- electron source index, js -- -- -- -- -- electron entrance The SRC -- -- -- -- -- the vue source public -- -- -- -- -- the vue - cli3 resources... . package.jsonCopy the codepackage.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 Editor"."win": {
"icon": "logo.ico"
},
"mac": {
"icon": "logo2.ico"}},"dependencies": {
"axios": "^ 0.18.0." "."cheerio": 3 "^" 1.0.0 - rc.."child_process": "^ 1.0.2"."element-ui": "^ version 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"}}Copy the codeThe entry of electron electron electron/main.js, launches the service and displays the page under 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.// Whether to integrate 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('Output with exec method:' + stdout);
console.log(`stderr: ${stderr}`);
});
}
})
app.on('activate'.() = > {
if (mainWindow === null) {
createWindow()
}
})
Copy the codeIcon to configure
"Build" : {productName ":" md editor ", / / application name "win" : {" icon ":" logo2. Ico "}, "MAC" : {" icon ":" logo2. Ico "}},Copy the codeElectron – Builder packing precautions
When running the NPM run distWin command, electron needs to download a lot of dependencies. Because the content to be downloaded needs to be about 60m large in a foreign VPN, and the network speed is not good in foreign VPN, errors are usually reported in the download failure. We had to download it manually.
Visit github.com/electron/el… Select the corresponding package for your electron version, mine is version 7.1.2, so download
Electron – v7.1.2 – win32 – x64.zip electron – v7.1.2 – mas – x64. Zip
Note: third-party download tools such as Thunderbolt can be used.
Download complete, the two systems save the file path is different, put the compressed package in
windows C:\Users\*****\AppData\Local\electron-builder\cache\winCodeSign
macOs ~/Library/Caches/electron
NPM run distWin NPM run distMac to package the file.
