Electron应用实战

具体步骤可参考创建一个项目，这里选择手动选择功能，并选中Babel、Router、Vuex、Css processors(scss)、Linter。 初始化完成后，进入EBlog目录，执行yarn serve即可运行项目。 此配置的目的为使vue中的所有资源都使用相对路径进行链…

在根目录下新建build文件夹，增加dev-runner.js文件,我们可以在这个文件中将vue和electron同时启动。 这里使用Node.js自带的fs模块就可以实现。 此时修改electron目录下的所有文件，都会使app重新启动。 至此所有相关配置都基本完成了，我们可…

支持在线更新同步，离线保存，在线后同步功能。 文章接口比较简单，一个文章的增删改查就可以了；需要提供一个全量拉取接口，在app打开后初始化全量拉取同步。 整体仿照微信客户端的布局方式，左侧为导航栏，右侧为对应页面。

页面编写如下,图标可使用iconfont增加对应页面vue文件，更改路由配置如下:其他设置1、路由切换可直接使用muse-ui提供的动画效果：2、左侧导航设置可拖拽区(开发者工具打开时，无法拖动，可关

可使用muse-ui的text-field组件，通过覆盖mavon-editor样式，使其出现在指定位置。 注意：标题覆盖到编辑器后，会使编辑器菜单里的标题和文件上传下拉菜单，出现在标题下面，需要修改覆盖整个编辑器的position样式属性，并且调整标题的z-index的值，使…

后端提供上传文件接口/upload编写上传代码editor增加属性ref="editor"和@imgAdd="imgAdd"事件：引入vuex的mapAction,提供saveImg方法：vuex代码

页面很多地方会用到消息提醒的功能，如保存成功、失败、删除等。 这里使用mu-snackbar组件，并使用vuex做全局的管理。 在组件中增加Message.vue文件，主要通过监听message来触发消息提醒。 然后将此组件引入到主文件App.vue中即可。 调用的时候就可以通…

列表页相对来说是比较简单的，头部增加搜索筛选项，右侧一个视图切换按钮。 默认展现方式是卡片形式，可以通过点击右上角的按钮来切换。 通过设置判断一个视图状态来展现不同的视图。卡片视图，右侧默认预览第一篇文章；单击列表可切换不同的文章预览，双击列表或卡片跳转到编辑页面。 回收站列表…

增加设置弹框，切换的主题主要有两个：系统的主题，和编辑器的主题。 系统主题颜色切换主要是通过修改覆盖css样式来达到切换的目的；Muse-UI提供有一个切换主题的方法，我们通过设置她可以直接使用。 也可以通过addCreateTheme实现样式扩展。 并且扩展了一些样式,你也可…

该功能类似mac 备忘录列表的滑动展示删除菜单效果。 主要通过使用js的wheel实现。 通过监听列表项的wheel事件，并判断deltaX的值，然后添加open-left样式，来实现滑动效果。

使用dialog.showSaveDialog获取导出文件的路径，然后调用fs.writeFileSync同步写入文件即可。 可以自定义一些样式等。 electron的webContents提供了一个printToPDF方法，我们可以直接使用这个方法来导出PDF。 逻辑是先将内…

为了使离线时也可以编辑及浏览文章，需要增加本地数据存储功能，在线时联网同步文章数据。 这里使用HTML5提供的新的本地存储数据库IndexedDB。 通过navigator.onLine来判断是否联网，在连网时通过接口拉取数据，然后进行同步。 同步有两种情况：本地向线上同步，线…

使用 electron-builder来打包应用。