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 組件和插件的性能差異？ 值得注意的是，越來越多的基於您的項目的大小。 在需要時需要加載，無論如何加載腳本。