Vue-cli: [Suggestion] Command to generate boilerplates like Components/Stores/etc

[skyronic]

vue make:component TodoItemComponent

can create a component in the right place with the right boilerplate. This can also be applied to vuex, where a single command can generate multiple files.

I personally feel it'll be best if the boilerplates are defined in the template repos itself rather than in vue-cli but i'm filing the issue here.

[JasinYip]

It looks like Laravel! :smiley:

[skyronic]

Yup, it's a very small feature in laravel but really enhances the workflow because the tiny details are quickly taken care of... I can see this aligning nicely with what I can imagine vue's philosophy is.

[jbruni]

Hmmm... just like php artisan... we could have commands provided by vue-cli itself, as well as commands provided by the templates... in both cases we as end-users would run them through vue-cli.

[acacha]

+1 Awesome

[etcha]

+1

[chrisvfritz]

@skyronic While I have nothing against Laravel, my guess is that vue-cli is trying to emulate npm-style commands instead, so something like vue make component TodoItemComponent (space instead of colon) might be more appropriate. Then as a non-Laravel developer, make also has me thinking of Makefiles, so I'd personally prefer generate or create instead.

I do foresee a complication though. This kind of feature would probably only be really useful with a config file, so that users could modify:

• the components directory
• whether components should be generated with a style element
• whether style elements should be scoped
• which lang to use for the style element
• which lang to use for the script
• which lang to use for the template

User-defined snippets a simpler alternative?

I have enjoyed generators in frameworks like Rails, Ember, etc - but honestly, I think single-file generators are often overkill. Text editors typically allow the definition of extension-scoped snippets, so in Atom for example, this does quite nicely:

'.text.vue':
  'Vue Component':
    prefix: 'vc'
    body: """
      <template>
        ${1}
      </template>

      <script>
        export default {
          data () {
            return {${2}}
          }
        }
      </script>

      <style lang="scss" scoped>
        ${3}
      </style>
    """

[skyronic]

@chrisvfritz I agree with you completely, and to be honest, I do have snippets for my use right now.

But there are a lot of people who might not use sublime, or are comfortable setting up snippets or want something that "just works". Also I agree that using npm style spaces are better, that's the approach i've adopted in my initial work on this (you can see an example in #41 )

Additionally, we might want to later add commands which touch multiple files.

[chrisvfritz]

@skyronic Ah, I hadn't seen that you'd started work on it! I very much like the way you've handled the configuration. :smiley:

[zigomir]

Can we have a discussion instead of feature label here? :) I just closed #41 since we're not going in that direction.

Main reason is we want vue-cli to be focused on delivering template as starting point.
Also, my (personal) reason is I don't see file creation as a bottleneck, while deciding on all the options (JS Fatigue™) up front as big one.

[chrisvfritz]

@zigomir Good idea. Done. 😃

[ispal]

I've been browsing through https://github.com/vuejs/awesome-vue and one problem I see is that there's no unified way to build components/plugins. I've many many different ways of doing them. Some linking directly to .vue files and some of them to bundled file which I assume is preferred. Would love to see an official starter template for plugin/components that are shared through eg. npm. Any thoughts?

[ispal]

Oops..missed #33

[chrisbraddock]

I'd like this as well.

If vue-cli is going to steer clear of snippet/component level boilerplates, does anyone know of alternatives? Plop looks cool but I'm looking for something with less configuration.

[posva]

@chrisbraddock IMO if this is ever added it should be added at a template level. Using plop to generate components or routes once the project has been generated by vue-cli look good 😄

[chrisbraddock]

Plop is working really well. The author, Andrew, helped me get a basic store module generator going.

That'll bang out store/modules/<module name>.js and store/actions/<module name>.js (which is currently just an empty export). I'm using gulp-inject on store/index.js to pull in module imports automatically as well.

[michaelscheurer]

Why has this important discussion be closed? In my opinion it's a very important feature to improve the workflow.

There is already a first alternative: https://github.com/NetanelBasal/vue-generate-component

Why don't start integrating it into vue-cli? What are the disadvantages?

[edgarvaldez99]

Same question as @michaelscheurer

[Akryum]

This can easily done by creating a vue-cli-plugin. Maybe it could be a builtin one @yyx990803?

[radfahrer]

I also feel this would be a nice feature to add to vue-cli. If a plugin is the way to go, it would benefit the project to provide this plugin as a prime example.

[trickstival]

I'd really like something like that. In Angular cli they already have this feature.
A builtin plugin would be very nice