webpack cli menu for setting configuration

Question

I see in the vue-cli setup something like this (meta.js)

user@ny-laptop ~/Documents/
> $ vue init webpack my-project                                                                                          

? Project name hi
? Project description how do i get this menu?
? Author (user <user@gmail.com>)
...etc

How does one go about creating a menu based configuration like this for a new webpack project? I have a core template that will have a lot of options, being able to select ahead of time would be very helpful.

thanks

Answer 1

You do it by adding properties to the meta.js.

Step by step example:

• Fork https://github.com/vuejs-templates/webpack

  • Example: https://github.com/acdcjunior/webpack-vue-template (besides forking I have renamed the repo as well)

• IMPORTANT: Make sure you are at master branch and commit.

  • Edit the meta.js file, adding properties.
  • For example, I have added the weather question: commit here.

• Now use vue init

  • Example:

    vue init acdcjunior/webpack-vue-template my-project-from-my-template
    

Example output (notice second question):

$ vue init acdcjunior/webpack-vue-template my-project-from-my-template

? Project name my-project-from-my-template
? How's the weather today? Very nice, thanks.
? Project description A Vue.js project template by acdcjunior
...

The created properties can be used in the templates:

• See /template folder.
• Example:
  • lintConfig in meta.js
  • Is used in package.json's tempalte to set some dependencies.

This is valid for Vue-cli v2.x.