javascript - 在现有应用程序上通过 Electron 进行Vue.js

标签 javascript node.js user-interface vue.js electron

我将尝试解释我的整个情况:

我用node.js编写了一个CLI应用程序,该应用程序开始增长,从解析器开始,然后创建了一个与解析器进行交互的Web API,最后创建了一个Web应用程序,该应用程序通过使用该API来显示信息。此网络应用程序很大程度上基于vue.js
我开始使用 Electron 将所有这些东西放在一起,所以我为解析器安装了npm包electron,创建了主脚本和渲染器脚本,更新了packages.json,添加了纯HTML并为我提供了第一个包含渲染的窗口。

至此,我开始将代码从先前的Web项目中移出。我认为这样做很容易,只需对Web代码进行一些更改(这非常简单,但主要是一个愚蠢的js,一个html和库(Bootstrap和vue.js)

很快,我意识到npm vue软件包(vue-cli,electron-vue等)是(应该)用于 Electron 应用程序的方式,正如在一些资源中所提到的那样:

  • https://medium.com/@mikeal/vue-js-electron-the-easy-way-adc3ca09234a
  • https://github.com/SimulatedGREG/electron-vue
  • https://itnext.io/a-file-system-browser-component-for-electron-vue-js-applications-eab285fbb3cb
  • https://medium.com/@kswanie21/electron-vue-js-f6c40abeb625

  • 事实是,它们中的大多数都是从您一无所有的前提开始的,并且它们使用样板创建空的Electron/Vue应用程序的框架。但是我的情况有所不同,我已经准备好一个后端,我已经将 Electron 插入了此后端

    所以...有什么问题?

    问题很简单,仅在 Electron GUI中使用<script src="vue.js"></script>而不使用npm软件包有什么优点和缺点?我能够使vue.js像这样工作,但是由于我没有看到任何资源可以这样做,所以我想知道我是否会在某个时候遇到进一步的问题。具体来说:
  • 我是否应该准备样板并开始将以前的代码插入该模板?
  • 如果我使用<script src=...方法, package 会很痛苦吗?
  • 使用npm vue有什么好处(请记住,我仅用于呈现已经解析的结果)
  • 如果您能指向我提到这种方法的资源,将不胜感激。

  • 我想知道什么会(或肯定会)出错。

    提前致谢!

    最佳答案

    不能100%确定我是否完全理解您的问题,但我会尽力回答。

    1.我应该去样板并开始插入我以前的代码吗?

    是的,没有。采用这种方法的最大原因是,如果您遇到进一步的问题,则通过使用样板可以更轻松地获得项目帮助。使用您自己的解决方案意味着更少的人甚至可以理解您的问题,甚至更少的人愿意创建自己的项目来重新创建您的问题以帮助您进行调试。

    但是,您不必非要使用样板,样板是由与您相似的人制作的。您可能会将代码放在某个地方,并将其称为样板,如果其他人想进行基于 Electron 和语音的项目,他们将开始使用该样板。如果您的项目符合您的方法并且对您有意义,那么您就没有理由要遵循其他人的工作方式。

    2.如果我使用<script src=...方法, package 会很痛苦吗?

    (澄清后编辑)

    分发Vue应用程序有两种基本方法。静态或服务器端呈现。静态意味着您生成了静态html文件和脚本,可以将其分发到市场上的任何Web主机上,并且可以很好地运行。呈现的服务器端基本上是您自己的小型服务器,例如Apache Web服务器,当用户请求您的网站时,该服务器会编译您的文件。

    对于服务器端渲染的应用程序,您需要在服务器/后端的Node.js代码和客户端代码的Ecmascript混合运行和开发代码的过程中将其编译为纯JavaScript,然后再发送给用户。在您注销这不是您的选择之前,我想提及一下DigitalOcean可以让您创建绝对可以用于生产级目的的“droplets”(虚拟机),因此您可以以$ 5的价格在droplet中运行服务器月,只需使用注册商即可注册您的域名。实际上,这更便宜,并且可以为您提供更多的服务器功能,以我的经验,它还更安全,性能更好(部分原因是,如果速度不够快,您可以简单地升级您的Droplet)。它通常也比网络酒店便宜。

    对于静态网站,您基本上有两种选择,有或没有Webpack(使用Webpack的优势要大得多)。

    如果没有Webpack,您将像做的那样仅包含Vue的<script=版本,然后仅使用javascript开发程序。尽管这样做确实可以做到,但是这更加繁琐,并且从长远来看会导致性能下降和工作流程不良。

    使用Webpack,您可以在Ecmascript中编写应用程序,并在其中添加import Vue,以便Webpack可以将所有脚本和.vue文件编译为一个main.js文件。通过导入Vue和所有组件,Webpack可以确保仅运行实际需要运行的代码,因此您将获得潜在的巨大性能提升。

    package 有问题吗?不,只要您需要的只是主要的vue.js文件,但是随着您的项目变得越来越大,并且需要越来越多来自其他地方的Vue组件和插件,您最终将得到很多script=标签,这些杂乱的网站使您的网站困惑不堪。它起作用了,只是简单地仅拥有一个script="main.js"标记,然后让Webpack为您生成main.js更加容易。

    看一下基本的Webpack + Vue项目。它会让您更好地了解Webpack项目的工作方式。

  • 安装vue-cli:npm install -g vue-cli
  • 创建一个简单的项目:vue init webpack-simple my-project

  • 3.使用npm vue有什么好处(请记住,我仅用于呈现已经解析的结果)

    (澄清后编辑)

    除了上面提到的?不,这与您是否愿意使用Webpack以及是否需要其他人为Vue开发的更多组件/插件有关。

    在加载script=require时仅加载 Vue时的性能差异?微不足道。

    加载更多Vue组件和插件时的性能差异?值得注意的是,越来越多地基于项目的规模。在需要时需要加载,无论脚本如何加载。

    关于javascript - 在现有应用程序上通过 Electron 进行Vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53229357/

    相关文章:

    javascript - 如果使用 jquery 内容为大写,则将 H3 标签替换为 H2

    javascript - CSS 不透明度忽略过渡时间

    Java - 如何判断用户是否已在文本字段中输入文本,但现在处于空闲状态?

    ios - 具有多个表格 View 的 Ipad 设计

    javascript - 按下某个字符时将字符放置在网格中

    javascript - IE、OF、Google Chrome 中的内存泄漏递归 javascript 函数

    javascript - webmethod 显示 500(内部服务器错误)

    node.js - 是否有 Handlebars 保留字的官方列表?

    javascript - NodeJS promise 与回调 : is there a reason not to support both?

    javascript - 使用nodejs fbgraph 对 facebook Graph API 进行分页