现有应用程序上电子上的Vue.js

Question

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

我在node.js中编写了一个CLI应用程序，该应用程序开始发展，从解析器入手，此后，我创建了一个与解析器进行交互的Web API，最后通过使用该API创建了一个Web应用程序显示信息。该网络应用主要基于vue.js

我开始使用电子将所有这些东西放在一起，所以我为解析器安装了npm软件包electron，创建了主脚本和渲染器脚本，更新了packages.json，添加了纯HTML并给出了我有渲染的第一个窗口。

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

很快，我意识到npm vue软件包（vue-cli，electron-vue等）是（据称）用于电子应用程序的方式，正如在一些资源中所提到的那样：

• 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应用程序的框架。但是我的情况有所不同，我已经准备好一个后端，已经将电子插入此后端

所以...有什么问题吗？

问题很简单，仅在电子GUI中使用<script src="vue.js"></script>而不使用npm软件包有什么优点和缺点？我能够使vue.js像这样工作，但是由于我还没有看到一个资源可以这样做，所以我想知道我是否会在某个时候遇到进一步的问题。具体来说：

1. 我应该去做些样板并开始插入我以前的代码吗？
2. 如果我使用<script src=...方法，包装会不会很痛苦？
3. 使用npm vue有什么好处（请记住，我仅用于呈现已经解析的结果）
4. 如果您能指出我提到这种方法的资源，将不胜感激。

我想知道什么会（或者肯定会）出错。

谢谢！

Answer 1

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

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

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

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

2。如果我使用<script src=...方法，包装会不会很痛苦？

（澄清后编辑）

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

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

对于静态网站，您基本上有两种选择，可以选择是否使用Webpack（使用Webpack更为优越）。

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

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

包装是否存在任何问题？不，只要您需要的是主要的vue.js文件，但是随着您的项目变大并且需要来自其他地方的越来越多的Vue组件和插件，您将最终得到很多script=标签你的网页。它行之有效，只是简单地仅拥有一个script="main.js"标记，然后让Webpack为您生成main.js即可。

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

1. 安装vue-cli：npm install -g vue-cli
2. 创建一个简单的项目：vue init webpack-simple my-project

3。使用npm vue有什么好处（请记住，我仅用于呈现已经解析的结果）

（澄清后编辑）

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

仅使用script=和require加载 Vue时的性能差异？可以忽略不计。

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