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

Question

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

我在node.js中编写了一个开始增长的 CLI 应用程序，我从一个解析器开始，然后我创建了一个 Web API 来与解析器交互，最后我创建了一个 Web 应用程序，通过使用 API 显示信息。 这个网络应用在很大程度上基于vue.js

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

在这一点上，我开始从我以前的 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.我是否应该使用样板并开始插入我以前的代码？

是和否。 采用这种方法的最大原因是，通过使用样板，如果您进一步遇到问题，则可以更容易地获得项目帮助。 使用您自己的解决方案意味着更少的人甚至能够理解您的问题是什么，甚至更少的人愿意建立自己的项目来重现您的问题以帮助您调试它。

但是，不，您不必使用样板，样板是由与您相似的人制作的。 你可以把你的代码放在某个地方，并称之为样板，如果其他人想要制作一个基于 vue 和电子的项目，他们就会开始使用。 如果您的项目适用于您的方法并且对您有意义，那么您就没有理由需要遵循其他人的做事方式。

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

（澄清后编辑）

分发 Vue 应用程序有两种基本方式。 静态或服务器端呈现。 静态意味着您生成静态 html 文件和脚本，您可以将它们分发到市场上的任何网络主机，并且它会运行得很好。 服务器端渲染基本上是你自己的小服务器，就像一个 Apache Web 服务器，它在用户请求你的网站时编译你的文件。

对于服务器端呈现的应用程序，您正在运行和开发您的代码，其中混合使用了用于服务器/后端的 Node.js 代码和用于客户端代码的 Ecmascript，该代码在发送给用户之前被编译为纯 javascript。 在您认为这不是您的选择之前，我想提一下，DigitalOcean 允许您创建“液滴”（虚拟机），您绝对可以将其用于生产级目的，因此您可以以每个 5 美元的价格在液滴中运行您的服务器月，只需使用注册商注册您的域。 这实际上更便宜，并为您提供更多的服务器能力，而且根据我的经验，它也更安全，性能更好（部分原因是如果速度不够快，您可以简单地升级您的 Droplet）。 它通常也比网络酒店便宜。

对于静态网站，您基本上有两种选择，使用或不使用 Webpack（使用 Webpack 更胜一筹）。

如果没有 Webpack，您会像现在一样，只包含<script=版本的 Vue，然后纯粹用 javascript 开发您的程序。 这更乏味，从长远来看会导致更差的性能和糟糕的工作流程，尽管它确实可行。

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

包装有问题吗？ 不，只要您需要的只是主要的 vue.js 文件，但是随着您的项目变得越来越大并且需要越来越多的来自其他地方的 Vue 组件和插件，您最终会在您的网站上出现大量script=标签。 它有效，只是简单地只有一个script="main.js"标签然后让main.js为您生成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 组件和插件的性能差异？ 值得注意的是，越来越多的基于您的项目的大小。 在需要时需要加载，无论如何加载脚本。