手把手教你Electron + Vue实战教程(二)
作者：Sufen
转发链接：
https://mp.weixin.qq.com/s/n9PeozLcIJFlORHMlzrlNQ
目录
手把手教你Electron + Vue实战教程（二）本篇
1 Electron升级
2020年5月19号，Electron更新了最新的 9.0.0 版本，带来了诸多改进，具体的我就不在此赘述了，大家可以看一下官方介绍：
https://github.com/electron/electron/blob/master/docs/breaking-changes.md
好了，我们现在就把上节课初始化好的项目升级到Electron9.0.0，只要简单的两步：1、命令行直接执行重新安装yarn add electron即可升级到最新版本Electron；2、删除src目录中background.js文件内的代码
app.allowRendererProcessReuse = true，这行代码其实就是我们上节课添加的，9.0 的版本已经设置为默认值了，所以此处我们就不需要了。
2 项目介绍
估计大家看到这里都已经忍不住了：你BB了那么久，你到底是要搞啥子项目呀……咳咳，我的锅我的锅，一开始就应该介绍一下先的了，拖到了现在……这实战教程其实并不是什么高难度的项目，就是仿有道云笔记，没错又是仿某某某的套路。。当然，鉴于时间的问题，我应该不会全放下来，只挑选 Markdown 的文件编写部分。在此，我有个小小的建议：「不要为了仿而仿，而是为了如何在一个项目中把你所学会的知识技能点糅合在一起，融会贯通举一反三，这才是我们的最终目的」
3 工欲善其事必先利其器
在开始正式写代码之前，有必要先安利一下前端最好的编辑器之一Visual Studio Code，当然，这是个仁者见仁智者见智的问题，最适合你的才是最好的！如果你选择不使用这个编辑器，那么你可以直接跳过这一小节了。 必装插件ESLint和Prettier - Code formatter，推荐一下我常用的代码风格和eslint设置，在项目根目录下分别新建三个文件.editorconfig、.eslintrc.js、.prettierrc.js，如下图所示：
「下面是代码展示，此处仅展示当前项目使用的eslint与代码风格样式，你可以自行选择是否使用。」
# 这是 .editorconfig 文件内容
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120//?这是?.eslintrc.js?文件内容
module.exports?=?{
??root:?true,
??env:?{
????node:?true
??},
??extends:?['plugin:vue/essential',?'@vue/airbnb'],
??parserOptions:?{
????parser:?'babel-eslint'
??},
??rules:?{
????'no-console':?0,
????'no-debugger':?0,
????semi:?['error',?'never'],?//?禁用?分号
????'no-multiple-empty-lines':?['error'],?//?代码空行?数量
????'linebreak-style':?[0,?'error',?'windows'],?//?使用windows的换行
????'comma-dangle':?[2,?'never'],?//??对象数组最后一个不带逗号
????'no-trailing-spaces':?0,?//?禁用?校验代码末尾带空格
????'import/no-dynamic-require':?0,?//?禁用?动态require
????'import/no-unresolved':?0,
????'no-param-reassign':?0,?//?声明为函数参数的变量可能会引起误解
????'max-len':?['error',?120],?//?单行代码最大长度
????'guard-for-in':?0,?//?禁用?禁用for?in?循环
????'no-shadow':?0,?//?禁用??禁止页面内相容参数名
????'object-shorthand':?0,?//?禁用?禁止对象内使用带引号字符串
????'no-restricted-syntax':?0,
????'no-plusplus':?0,?//?禁用?++
????'consistent-return':?0,?//?关闭箭头函数必须要return
????'no-return-assign':?0,?//?return?语句中不能有赋值表达式
????'global-require':?0,?//?关闭禁止使用requrie
????'prefer-promise-reject-errors':?0,?//?这条规则旨在确保承诺只被Error对象拒绝。
????'import/extensions':?'off',?//?禁用文件名详细文件类型后缀
????'import/no-extraneous-dependencies':?['error',?{?devDependencies:?true?}],
????'arrow-parens':?['error',?'as-needed'],?//?箭头函数参数括号，可选?always：（默认）在所有情况下都需要参数；as-needed：当只有一个参数时允许省略参数
????'no-undef':?0,?//?关闭显式声明全局变量的要求
????'class-methods-use-this':?0,
????'no-underscore-dangle':?['error',?{?allow:?['_id']?}],?//?允许指定的标识符具有悬挂下划线
????camelcase:?0,?//?关闭使用骆驼拼写法
????'no-global-assign':?0,?//?允许修改只读全局变量,
????'space-before-function-paren':?[
??????'error',
??????{
????????anonymous:?'never',
????????named:?'never',
????????asyncArrow:?'always'
??????}
????],
????//?对象解构不需要换行
????'object-curly-newline':?[
??????'error',
??????{
????????ObjectPattern:?{
??????????multiline:?true
????????}
??????}
????],
????'no-unused-expressions':?['error',?{?allowShortCircuit:?true,?allowTernary:?true?}]?//?允许在表达式中使用三元运算符，类似于短路评估
??}
}
//?这是?.prettierrc.js?文件内容
module.exports?=?{
??semi:?false,?//?去掉分号
??singleQuote:?true,?//?使用单引号
??printWidth:?120,?//?单行代码最大长度
??trailingComma:?'none'?//?去掉结尾逗号（对象，数组等）
}
搞定！现在我们可以愉快的撸码了……
4 左侧面板开发
有道云笔记截图
可以看到，左侧面板就是一个文件列表，我们这里不仅需要做出图片中的列表，还要在列表顶部添加搜索栏，便于我们方便快捷搜索列表笔记。当前，还需要有新增笔记和导入笔记的功能，先看一下我们这一节的成品图：
4.1 整体布局
我们先删除项目中的多余页面与组件：
vue-electron-notes/src/components/HelloWorld.vuevue-electron-notes/src/views/About.vue删减后的路由文件：
import?Vue?from?'vue'
import?VueRouter?from?'vue-router'
Vue.use(VueRouter)
const?routes?=?[
??{
????path:?'/',
????name:?'Home',
????component:?()?=>?import('@/views/Home')
??}
]
const?router?=?new?VueRouter({
??mode:?'history',
??base:?process.env.BASE_URL,
??routes
})
export?default?router删减后的App.vue文件：
??
???? 这里为了方便快捷，就简单粗暴地使用了 css 通配符 *，但是建议大家在实际项目中不要这么干，懂的自然懂……
我们继续修改view目录下的Home.vue文件，使用flex布局设置为最常见的两栏布局（flex的爽我就不多说了，更何况我们这里不需要考虑什么 css 兼容性），左侧面板固定宽度，右侧内容编辑区自适应：
??
????