Vue-cli: Electron support

[algil]

What problem does this feature solve?

Create an appropriate folder structure for electron app allow to launch the 'main' process after 'renderer' process build has finished.

Also add vue-electon.

What does the proposed API look like?

Add this option in create command wizard

[yyx990803]

Out hope is that this can be done by the community in the form of a plugin.

/cc @SimulatedGREG since he's been doing a great job on electron-vue. We are curious to know if the current API has any road blocks for implementing the plugin.

[SimulatedGREG]

I've been pretty busy with work items at the moment, but already have been diving into the docs that were posted a few days ago. Don't have any PoCs just yet, but it looks very promising. This is something I definitely don't want to rush out, so it'll take some time. I'll be sure to post my findings here if I find any road blocks come about.

[nklayman]

I've created vue-cli-plugin-electron-builder. It sets up electron-webpack and electron-builder, with build and serve commands. I hope this solves this issue.

[SimulatedGREG]

Planning to dive more into this at the end of the month, but I did find one item that I feel could be changed to better benefit third-party plugins. Currently, the webpack development server setup that comes internally with @vue/cli is phenomenal and really sets a great standard for all Vue applications, but it is currently locked to the serve command and can't be further customized.

https://github.com/vuejs/vue-cli/blob/bbc931c285d3ceaa01743dc56ef7c96ddf06480f/packages/%40vue/cli-service/lib/commands/serve.js#L15

I propose that the logic for setting up the development server, or at least the produced webpack-dev-server configuration object somehow be exposed in its own file, therefore allowing third-party plugins to make use of the configuration and further customize as needed.

For the purposes of electron-vue, it is a bit of a pain to recreate a development server when there are not very many differences between the internally provided development server. This would not only help my purposes, but I'm sure there are many other situations where third-party plugins could greatly benefit from this.

[nklayman]

@simulatedgreg why don't you just start the built-in development server, and then launch electron and have it load the render process from the development server? Then you would have all the features of the built in server like hot module reload without having to rewrite the code yourself. I am actively working on an implementation of this in a future version of vue-cli-plugin-electron-builder. What I am currently stuck on is modifying the base webpack build config for electron, but this is only required for building, not the dev server.

[algil]

I've created vue-cli-plugin-electron-builder. It sets up electron-webpack and electron-builder, with build and serve commands. I hope this solves this issue.

@nklayman I've stated to use your plugin, it's great! thanks!

[nklayman]

@SimulatedGREG I created this PR which allows the build/serve commands to be imported and called with a custom webpack config. [email protected] uses the custom cli-service of the PR. It imports the build/serve commands and calls them with a modified webpack config that works with electron.

[solarhell]

@nklayman LGTM

[mathe42]

Hi,

just read https://v6.electronforge.io/plugins/webpack (in beta) this seems to be easy with vue-cli...

and you have the complete electron-forge api...