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

Question

I will try to explain my whole situation:

I wrote a CLI application in node.js that started growing, I started with a parser, after that I created a web API to interact with the parser, and finally I created a web app that, by consuming the API displays information. This web app is heavily based on vue.js

I started working in putting all of this together using electron, so I installed the npm package electron for my parser, created the main and renderer scripts, updated the packages.json, added a plain HTML and it gave me the first window with the rendering.

At this point I started moving the code from my previous web project. I thought it would be easy to do this, just a few changes to the web code (it is very simple yet, mainly one silly js, one html, and the libraries (Bootstrap and vue.js)

Soon enough I realized that the npm vue package (vue-cli, electron-vue, etc) is (allegedly) the way to go for electron apps, as suggested in several resources, to mention:

• 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

The thing is that most of them start from the premise that you have nothing, and they use a boilerplate to create a skeleton of an empty Electron/Vue app. But my case is different, I have a backend ready, I have electron already plugged into this backend

So... What's the question?

The question is simple, what are the advantages and disadvantages of just using <script src="vue.js"></script> in an electron GUI instead of using the npm package? I was able to make the vue.js work like that, but as I have not seen a single resource doing this, I wonder if I will at some point get to further problems. Specifically:

1. Should I go for the boilerplate and start plugging my previous code to that?
2. If I use the <script src=... approach, will the packaging be painful?
3. Are there any benefits in using the npm vue (Remember I only use to render results that I have already parsed)
4. If you could point me to a resource that mentions this way is greatly appreciated.

I would like to know what can (or definitely will) go wrong.

Thanks in advance!

Answer 1

Not 100% sure if I fully understand your questions, but I'll try to answer as best I can.

1. Should I go for the boilerplate and start plugging my previous code to that?

Yes and no. The biggest reason for going with this approach would be that by using a boilerplate it's much easier to get help with your project if you hit problems further down the line. Using your own solution means fewer people will even be able to understand what your problem is, and even fewer will be willing to set up a project of their own to recreate your issue to help you debug it.

However, no you don't have to go with a boilerplate, boilerplates were made by people similar to yourself. You could probably put up your code somewhere and call it a boilerplate that other people will start using if they wanna make a vue and electron based project. If your project works with your approach and makes sense to you there's no reason why you'd need to conform to how other people do things.

2. If I use the <script src=... approach, will the packaging be painful?

(Edited after clarification)

There are two basic ways of distributing a Vue app. Static or server side rendered. Static means you generate static html files and scripts that you can distribute to any web host on the market and it'll run just fine. Server side rendered is basically your own little server, like an Apache web server, that compiles your files when a user requests your website.

For a server side rendered application you're running and developing your code in a mix of Node.js code for your server/backend, and Ecmascript for your client side code which is compiled into plain javascript before being sent to the user. Before you write this off as not being an option for you I wanna mention that DigitalOcean lets you create "droplets" (virtual machines) that you can most definitely use for production grade purposes, so you can run your server in a droplet for $5 per month and just use a registrar to register your domain. This is actually cheaper and gives you more power over your server, and in my experience is also more secure and better performing (partially because you can simply upgrade your droplet if it's not fast enough). It's also generally cheaper than a web hotel.

For a static website you basically have two options, with or without Webpack (with Webpack is far superior).

Without Webpack you would, like you're doing, just include the <script= version of Vue and then develop your program purely in javascript. This is more tedious and in the long run results in worse performance and a bad workflow, though it does work to do.

With Webpack you write your application in Ecmascript, where you would import Vue so that Webpack can compile all your scripts and .vue files into a single main.js file. By importing Vue and all your components Webpack can make sure you're only ever running code that actually needs to be run, so you'll experience a potentially massive performance boost.

Are there any problems with packaging? No, as long as all you need is the main vue.js file, but as your project gets larger and needs more and more Vue components and plugins from elsewhere you're gonna end up with a lot of script= tags cluttering your website. It works, it's just that it's way easier to simply only have a script="main.js" tag and then let Webpack generate main.js for you.

Take a look at a basic Webpack+Vue project. It'll give you a better idea of how a Webpack project works.

1. Install vue-cli : npm install -g vue-cli
2. Create a simple project: vue init webpack-simple my-project

3. Are there any benefits in using the npm vue (Remember I only use to render results that I have already parsed)

(Edited after clarification)

Apart from the above mentioned? No. It's more related to whether or not you're willing to use Webpack or not, and if you're ever gonna need more components/plugins for Vue developed by other people.

Performance differences on loading only Vue with script= vs require ? Negligible.

Performance differences on loading more Vue components and plugins? Noticeable, more and more based on the size of your project. Require loads when it's needed, script loads regardless.