class="column"
ref="previewor"></preview>
</div>
</div>
编辑区
左侧使用插件：
require('vue2-ace-editor')，处理实时监听
Editor 输入 Markdown 内容，将内容传出去。
watch: {
input: function(newContent, oldContent) {
messageBus.newContentToRender(newContent);
}
},其中这里的
messageBus 就是把 vue 和 ipcRenderer 相关逻辑事件放在一起的
main.js：
import Vue from 'vue';
import App from './App';
import 'buefy/dist/buefy.css';
import util from 'util';
import { ipcRenderer } from 'electron';if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false
export const messageBus = new Vue({
methods: {
newContentToRender(newContent) {
ipcRenderer.send('newContentToRender', newContent);
},
saveCurrentFile() { }
}
});
// 监听 newContentToPreview，将 url2preview 传递给 vue 的newContentToPreview 事件
// 即，传给 Preview 组件获取
ipcRenderer.on('newContentToPreview', (event, url2preview) => {
console.log(`ipcRenderer.on newContentToPreview ${util.inspect(event)} ${url2preview}`);
messageBus.$emit('newContentToPreview', url2preview);
});
/* eslint-disable no-new */
new Vue({
components: { App },
template: '<App/>'
}).$mount('#app')
编辑器的内容，将实时由
ipcRenderer.send('newContentToRender', newContent); 下发出去，即由 Main 进程的
ipcMain.on('newContentToRender', function(event, content) 事件获取。一个 Electron 应用只有一个 Main 主进程，很多和本地化东西 (如：本地存储，文件读写等) 更多的交由 Main 进程来处理。
如本案例中，想要实现的第一个功能就是，「可以自定义固定模块，如文章的头部，或者尾部」
我们使用一个插件：
electron-store，用于存储头部和尾部内容，创建Class：
import {
app
} from 'electron'
import path from 'path'
import fs from 'fs'
import EStore from 'electron-store'class Content {
constructor() {
this.estore = new EStore()
this.estore.set('headercontent', `<img src="http://bimage.coding01.cn/logo.jpeg" class="logo">
<section class="textword"><span class="text">本文 <span id="word">111</span>字，需要 <span id="time"></span> 1分钟</span></section>`)
