前言

公司的项目的文档中心是使用markdown进行编写的，加入了许多自定义的内容与规则，为了使运营人员方便编写文档，所以启动了这个项目。

开始

该项目对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进行文件流编辑了。

源码

github.com/903529487/m… 欢迎star

运行

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下启动了koa服务和显示的页面。

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
进行文件打包。

还有一些配置可以去看下官网，我这里就不配置了，最后放图

文章永久链接：https://tech.souyunku.com/42762