不要让自己的上限成为你的底线
前言诈尸更新系列，为了跟上脚步，尝试了vue3，在学习vue3的时候顺便学习一手electron和ts，本教程将分别发布，源码会在最后的文章发布。因为还在开发中，目前也是为了防止有些遇到坑不会及时忘掉，所以先整理一部分出来
将分2部分发出教程，因为配置的东西个人感觉有点多并且跟开发内容相关的东西并不是很多，因此单独发出，见谅，第二篇这两天发出，长文警告！⚠。
开发思路：
页面：
列表页index.vue 头部、搜索、内容部分，只能有一个列表页存在
设置页setting.vue 设置内容和软件信息，和列表页一样只能有一个存在
编辑页 editor.vue icons功能和背景颜色功能，可以多个编辑页同时存在
动效：
打开动效，有一个放大、透明度的过渡，放不了动图这里暂时不演示了。
标题过渡效果
切换index和setting时头部不变，内容过渡
数据储存：数据的创建和更新都在编辑页editor.vue进行，这个过程中在储存进nedb之后才通信列表页index.vue更新内容，考虑到性能问题，这里使用了防抖防止连续性的更新而导致卡顿（不过貌似没有这个必要。。也算是一个小功能吧，然后可以设置这个更新速度）
错误采集：采集在使用中的错误并弹窗提示
编辑显示：document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
在开发的时候还遇到过好多坑，这些都是在electron环境中才有，比如
@input触发2次，加上v-model触发3次。包括创建一个新的electron框架也是这样，别人电脑上不会出现这个问题，猜测是electron缓存问题
vue3碰到空属性报错时无限报错，在普通浏览器（edge和chrome）是正常一次
组件无法正常渲染不报错，只在控制台报异常
打包后由于electron的缓存导致打开需要10秒左右，清除c盘软件缓存后正常
其他的不记得了。。
这里暂时不提供vue3和electron介绍，有需要的可以先看看社区其他的有关文章或者后期再详细专门提供。软件命名为i-notes。
vue3中文教程
https://vue3js.cn/docs/zh/guide/migration/introduction.html
electron教程
https://www.electronjs.org/
typescript教程
https://www.typescriptlang.org/
electron-vue里面的包环境太低了，所以是手动配置electron+vue3（虽然说是手动。。其实就两个步骤）
目录结构electron-vue-notes ├── public │ ├── css │ ├── font │ └── index.html ├── src │ ├── assets │ │ └── empty-content.svg │ ├── components │ │ ├── message │ │ ├── rightClick │ │ ├── editor.vue │ │ ├── header.vue │ │ ├── input.vue │ │ ├── messageBox.vue │ │ ├── switch.vue │ │ └── tick.vue │ ├── config │ │ ├── browser.options.ts │ │ ├── classNames.options.ts │ │ ├── editorIcons.options.ts │ │ ├── index.ts │ │ └── shortcuts.keys.ts │ ├── inotedb │ │ └── index.ts │ ├── less │ │ └── index.less │ ├── router │ │ └── index.ts │ ├── script │ │ └── deleteBuild.js │ ├── store │ │ ├── exeConfig.state.ts │ │ └── index.ts │ ├── utils │ │ ├── errorLog.ts │ │ └── index.ts │ ├── views │ │ ├── editor.vue │ │ ├── index.vue │ │ ├── main.vue │ │ └── setting.vue │ ├── App.vue │ ├── background.ts │ ├── main.ts │ └── shims-vue.d.ts ├── .browserslistrc ├── .eslintrc.js ├── .prettierrc.js ├── babel.config.js ├── inoteError.log ├── LICENSE ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.json ├── vue.config.js └── yarn.lock 使用脚手架搭建vue3环境没有脚手架的可以先安装脚手架
npm install -g @vue/cli创建vue3项目
vue create electron-vue-notes # 后续 ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features # 手动选择配置 # 后续所有配置 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x (Preview) ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save, Lint and fix on commit ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) n