如何从电子应用程序内部构建Vue视图以安装为插件

Question

I am writing a reporting app that runs in electron. Reporting means I have a data source and users write views that arrange the data in whichever ways they like so it can be printed out or archived as PDF.

Let's say there is a list of student data along with grades for courses. The reporing app allows you to create a report that has a data table with names and grades for each course. So you end up with grade reports. Someone else wants just names and addresses another one wants to create a library card for each student. HTML and CSS combined with Vue make a great foundation to write this stuff.

The easy part is to fetch data from the database and offer json as a data source to views. The difficult part is how to let users add their reports to the app. In dev mode I can just add views to directories, import them and render the data as part of the app. But I have my views available at build time. Once I have built and shipped the production app it's out of my hands and the user can't add their views to the app anymore because they don't rebuild the app. They just want to point to a directory, add their views and use them.

I have decided to use single file components because they allow users to simply add calculations and maybe use pug etc to keep it simple. Besides I can store data about the component in a straight forward way (like name of report, department etc)

To my knowledge I need to build those views programmatically and load them dynamically.

So my questions are:

1. How can I build and mount single file components (.vue) dynamically from within a production app that has no prior knowledge of user produced files?
2. Do I need to build these components or is there a way to utilize on board tools to just read and render these components?
3. Is there a better way to serve these files?

More information: Security is not a concern. So loading user created views is ok. It needs to be working in electron. I do have a server based app written in Ruby that does the same thing but the server is going away anytime soon so it has to be client based and executable. I cannot install node on client PCs so they could just build their own app and include their own views via hot reloading.

If you're interested in reporting apps there is one in JS but server based: https://jsreport.net/ or mine, ruby based: https://github.com/hmt/sahib

Answer 1

You could watch the directory and respond to new files being add. That's for the dynamic part of your question. A nice way is node-fs .

Using the same lib you can serialize and deserialize object to or from file, letting you load the file from your user.

At this point, you only need to be able to change back and forth from an object to a Vue component. As far As I know, this is no problem as you can

new Vue (object)