开发人员必须适应的最新趋势是为多个操作系统编写一个代码库。Electron是一个JavaScript框架，允许您使用简单的JavaScript和HTML创建桌面应用程序，并将网站转换为可以充分利用Windows、Mac或Linux操作系统的所有功能的可执行应用程序。Vue是一个旨在构建交互式和渐进式Web应用程序的库，它通过简单灵活的API提供数据响应组件。在本教程中，我们将介绍如何使用Vue和Electron构建Markdown预览应用程序。先决条件要继续学习本教程，您需要具备以下条件：熟悉HTML、CSS和Javascript(ES6+)基本了解VSCode或您的开发计算机上安装的任何代码编辑器我们将构建什么我们将构建什么预览降价代码桌面应用程序。基本上，我们将有一个包含两列的网格：一列用于文本编辑器，一列用于预览。完成的结果将如下所示：设置Vue使用VueCLI创建一个新的Vuejs应用程序。如果您的开发计算机上未安装VueCLI，您可以使用以下命令安装它：npminstall-g@vue/cli-g标志将在您的计算机上全局安装它。接下来，使用CLI创建一个新的Vue应用程序，使用vuecreate命令后跟项目名称。我们的应用程序的名称是markdown-previewer，因此我们可以通过运行以下命令来创建它：vuecreatemarkdown-previewer运行vuecreatemarkdown-previewer将创建一个新的Vue应用程序，但首先，系统会提示您设置应用。步骤1选择Manuallyselectfeatures功能并按Enter，这将使您能够明确选择要包含在新项目中的库。Step2选择和控制功能列表中的某一项，鼠标在这里不能工作，所以当你要选择/取消一个功能时，请使用箭头上下移动，然后按空格键。从路由器、Babel和Linter中选择。在第3步中，我们不会使用历史模式，而是使用散列模式。步骤4选择ESLint+标准配置。这基本上就是我们linter的配置，ESLint帮助您在编写代码时维护模式。步骤5单击Lintonsave。当您保存代码时，它将对代码运行lint。单击Lintonsave，它会在您保存代码时对代码运行lint。第6步选择package.json，我们将在其中存储所有项目依赖项。第7步输入Y或N，具体取决于您是否要将其保存为预设，这样可以节省您在创建新的Vue应用程序时执行所有这些步骤的时间。单击Enter开始构建新的Vue应用程序。创建应用程序后，您应该在终端上看到以下内容：要运行应用程序，请移至项目目录，然后运行??npmrunserve。cdmarkdown-previewercode。&&npm运行服务代码。命令将在VSCode中打开项目，但欢迎您使用您选择的任何代码编辑器。编译后，应用程序将在应用程序运行的终端上在端口http://localhost:8080/上输出。如果您在浏览器上访问http://localhost:8080/，您应该会看到以下内容。现在我们已经启动并运行了Vue应用程序，是时候添加electron-builder包了。添加electron-builderelectronic-builder包可帮助您为macOS、Windows和Linux打包和构建可分发的Electron应用程序，并提供开箱即用的自动更新支持。要将此包添加到您的应用程序，请使用Vueadd命令，VueCLI的这个很酷的功能会自动在您的应用程序中配置该包。要安装包，请运行以下命令vueaddelectron-builder接下来，系统将提示您选择您喜欢的版本。选择最新版本（撰写本文时为9.0.0）并按Enter键继续。运行此命令后，将在src目录中创建一个background.js文件。这就是Electron所做的，主进程为应用程序创建桌面窗口。安装完electron-builder包后，你会在package.json文件中发现一些新的脚本："electron:build":"vue-cli-serviceelectron:build","electron:serve":"vue-cli-serviceelectron:serve","postinstall":"electron-builderinstall-app-deps","postuninstall":"electron-builderinstall-app-deps"使用electron:serve命令运行应用程序。npmrunelectron:serve这将在您的桌面上打开Electron应用程序。安装Bootstrap下一步是安装Bootstrap，它将帮助您更快地设置用户界面。使用vueadd命令安装Bootstrap。请记住，vueadd命令将处理main.js文件中的包注册。要安装它，请运行以下命令：vueaddbootstrap-vuebootstrap系统将询问您是否要使用babel。输入y并按Enter键继续。现在，我们可以设置用户界面(UI)。设置用户界面在设置用户界面之前，让我们整理一下。首先，将compoments/HelloWorld中的代码替换为以下代码。这是Bootstrap中的基本网格系统，您应该会遇到由于eslint-loader而导致的错误。要禁用它，请创建一个vue.config.js文件并添加以下内容。module.exports={lintOnSave:false}为了使这些更改生效，您需要重新启动服务器。现在，让我们设置代码编辑器。为此，我们将使用Ace包。要安装此软件包，请打开您的终端并键入以下内容。npminstall--save-devvue2-ace-editor接下来，在HelloWorld.vue组件中定义ace包。components:{editor:require("vue2-ace-editor")}您还必须为编辑器定义一些状态。例如，您需要定义内容状态，其中存储所有降价代码。此外，您应该使用state属性定义编辑器的高度。data(){return{content:"",height:window.innerHeight-100};},现在创建一个方法来引入编辑器的所有实例，例如语言类型、主题和模式。方法：{editorInit(){editorInit(){require("brace/ext/language_tools");require("大括号/模式/降价");require("大括号/主题/吸血鬼");}}}现在，您可以在模板部分注册组件。输出应该看起来像this：我们的UI需要更多清理，让我们删除Vue徽标并添加一个预览部分。要删除Vue徽标，请转到views/Home.vue文件并将代码替换为以下代码。我们还需要移除应用程序顶部的导航链接并更改背景颜色。打开根App.vue组件并将代码替换为以下内容。更改的结果应该如下所示：现在我们可以添加预览部分了。我们将使用卡片来预览标记。在components/HelloWorld.vue文件中向模板添加一张简单的卡片。

预览器