既然是编辑器应用，所有很多个性化设置和内容，就有必要存于本地，如编辑器所需要的样式文件、自定义的头部尾部内容等。这里我选择：
electron-store
npm install electron-store --save整合
万事俱备，接下来我们就开始着手实现简单的 Markdown 的编辑和预览功能。
先看
src 文件夹结构：
.
├── README.md
├── app-screenshot.jpg
├── appveyor.yml
├── build
│ └── icons
│ ├── 256x256.png
│ ├── icon.icns
│ └── icon.ico
├── dist
│ ├── electron
│ │ └── main.js
│ └── web
├── package.json
├── src
│ ├── index.ejs
│ ├── main
│ │ ├── index.dev.js
│ │ ├── index.js
│ │ ├── mainMenu.js
│ │ ├── preview-server.js
│ │ └── renderer.js
│ ├── renderer
│ │ ├── App.vue
│ │ ├── assets
│ │ │ ├── css
│ │ │ │ └── coding01.css
│ │ │ └── logo.png
│ │ ├── components
│ │ │ ├── EditorPage.vue
│ │ │ └── Preview.vue
│ │ └── main.js
│ └── store
│ ├── content.js
│ └── store.js
├── static
└── yarn.lock整个 APP 主要分成左右两列结构，左侧编辑 Markdown 内容，右侧实时看到效果，而页面视图主要由 Renderer 来渲染完成，所以我们首先在
renderer/components/ 下创建 vue 页面：
EditorPage.vue：
<div id="wrapper">
<div id="editor" class="columns is-gapless is-mobile">
<editor
id="aceeditor"
ref="aceeditor"
class="column"
v-model="input"
@init="editorInit"
lang="markdown"
theme="twilight"
width="500px"
height="100%"></editor>
<preview
id="previewor"
