本文主要介绍了Vue3和Electron实现桌面端应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
为了方便记录一些个人随笔，我最近用Laravel和Vue 3.0撸了一个博客系统，其中使用到了一个基于markdown-it 的 markdown 编辑器Vue组件v-md-editor。我感觉用它去编写markdown还是很方便的。后面就有了一个想法，基于此组件用Electron来实现一个markdown桌面端应用，自己平时拿来使用也是个不错的选择。
题外话：VS Code就是用Electron开发出来的桌面应用，我现在除了移动端的开发外，其他的都是使用VS Code来开发了，各种插件开发起来真的很方便。
接下来我就带大家来一步步来实现这个功能。
Vue CLI 搭建Vue项目
在选择的目录下执行vue create electron-vue3-mark-down
选择自定义的模板(可以选择默认的Vue 3 模板)
选择Vue3 和 TypeScript, 其他的选项基于自身项目决定是否选择
执行npm run serve看看效果
Vue项目改造为markdown编辑器
执行npm i @kangc/v-md-editor@next -S安装v-md-editor
添加TypeScript类型定义文件
由于v-md-editor这个库没有TypeScript类型定义文件，我就直接在shims-vue.d.ts这个文件的后面添加的，当然也可以新建一个文件添加申明(tsconfig.json能找到这个文件就OK)。
declare mod<a>本文来源gao($daima.com搞@代@#码(网</a>ule "*.vue" { import type { DefineComponent } from "vue"; const component: DefineComponent; export default component; } <!-- 添加的内容 --> declare module "@kangc/v-md-editor/lib/theme/vuepress.js"; declare module "@kangc/v-md-editor/lib/plugins/copy-code/index"; declare module "@kangc/v-md-editor/lib/plugins/line-number/index"; declare module "@kangc/v-md-editor"; declare module "prismjs";
改造App.vue
<div> </div> /* 去掉一些按钮 */ .v-md-icon-save, .v-md-icon-fullscreen { display: none; }
这个文件也很简单，整个页面就是一个编辑器
，这个markdown编辑器有高亮显示，代码显示行号，复制代码按钮等插件，当然更方便的是可以添加其他的插件丰富这个markdown编辑器的功能.
效果如下
Vue CLI Plugin Electron Builder
我尝试过用Vite 2.0去搭建Electron项目，但是没有找到类似的Vite和Electron结合好使的工具，所以放弃了Vite 2.0的诱惑。如果有小伙伴有推荐可以分享下。
使用vue add electron-builder安装，我选择的是13.0.0的Electron
以上就是Vue3和Electron实现桌面端应用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue3和Electron实现桌面端应用详解
