This template is useful for compiling VueJS single file components (SFC) into standalone JS files for use in the browser. This is useful for devs that want to create a simple component that can be used on a site without having to build an entire app around it, similar to the way a JQuery plugin might be used. The template, script, and styles are all compiled to a single JS file.
Then, run the webpack compiler and point the `--env.file` argument to the .vue file you created (you don't need to add the extension). The path should be relative to the `src` folder, so if you created your `.vue` file in the `src` folder, the path would just be the name of the file. For example, if the file is located in `src/sub-folder/my-component.vue`, the path you would enter for the `--env.file` argument would be `sub-folder/my-component`.
The webpack compiler runs in watch mode so any changes you make will update the compiled file. Whenever you make changes to you component, as long as the webpack compiler is running, the changes will be re-compiled and saved over the same output file. The compiled output file will be created at the same relative path in the `dist` folder that it was located in the `src` folder. So if you create a component at `src/some-sub-folder/my-rad-component.vue`, the compiled file will be located in `dist/some-sub-folder/my-rad-component.js`.
Make sure you add a `name` property to the script section of the component. This is what will be used as the tag for your component when you use it in your app/HTML file.
Giving your component a name property of `my-component` means you will add your component to the app as `<my-component></my-component>`.
The template package includes a sample component (`example.vue`) that you can test it all out with. The command you would use to compile it would be `webpack --env.file=example`. The component has a name property of `example`, the the tagname you would use in your HTML woudl be `<example></example>`.
## Converting an existing Vue Single File Component to a standalone JS file
To convert an existing Vue Single File Component to a standalone JS file, simple add it to the `src` folder along with all the required dependencies (make sure all the paths are correct for the dependencies). Then run the compiler (`webpack` command) with the `--env.file` argument pointing to the component. If anything goes wrong, the compiler will tell you what errors occured.