vue-generator

A CLI generator for Vue components, views and store modules
Supports Vue 2.x

Install

$ npm install -g vue-generator

Usage

The most basic command runs a wizard to create a component, view or store.

$ vg
``` 

**Note**: Names can be inputted in any format (slug-case, camelCase, PascalCase etc.). 

## Templates

Vue generator comes with default templates but all the templates are fully customizable. 
There are two ways to customize templates:

**edit default templates**

The default templates can be customized to fit your needs. Run ```vg show-templates``` to open the default template directory.

**create custom templates**

It's also possible to create custom templates in another directory. 
The best way to start is by copying the default templates ```vg copy-templates``` and edit them. 
Don't forget to run ```vg init``` or set the template path with ```vg settings``` to use your custom templates with vue-generator

There are 3 template types:

* view
* component
* store

A template path should at least contain 3 folders with the names that match the template types.

#### custom template folders

It's also possible to add other custom template folders. If you created a custom template folder and want to use it 
when creating a view, store or component you have to set the ```-t, -template <template>``` option of the following commands
```vg component```, ```vg view``` and ```vg store```

#### Template folder structure

Inside a template folder there are no limits it can contain as much files and folder as possible.

#### Variables

Templates can be customized by using variables. Variables can be used as folder name in the following format ```{variable}```. 
Inside files you can use the handlebar syntax ```{{variable}}```.

**available variables:**

* ```name```: Name in it's original format
* ```name_pc```: Name converted to PascalCase
* ```name_sc```: Name converted to slug-case
* ```name_cc```: Name converted to CamelCase

See default templates for examples.

## Settings

There are four layers of settings (From least to most important):

* default global settings
* global settings in user directory .vuegenerator file
* local settings in .vuegenerator file in current directory
* options of the command you are running

An option will always override a local setting etc. 

The four layers combined determine the settings used in every command.

You can see the settings of a directory by running ```vg settings```. 
This is without the option overrides of course.

## Commands

#### help

Show help

```console
$ vg -h

wizard

Starts a wizard to create a component, view or store module.

$ vg wizard [type] [name]

Arguments:

• ``type``: (Optional) The type of template you want to use (store, page, view).
• ``name``: (Optional) The name you want to use in the template.

Examples:

$ vg
$ vg wizard view
$ vg wizard
$ vg wizard component scrollBar

init

Create a local settings file (.vuegenerator). Local settings always override global settings.

$ vg init

component

Directly create a component based on the current settings.

$ vg component <name>

Arguments:

• ``name``: The name you want to use for the component.

Options:

• ``-d, --destination <destination>``: Override the destination for component.
• ``-p, --template-path <template-path>``: Override template path.
• ``-t, --template <template>``: Override template type. By default it uses the 'component' folder from the template path. With this option you can use a different template folder.
• ``-f, --force``: Force creation of a component. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ vg component check-box
$ vg component RadioButton -d ./components/ui 
$ vg component videoPlayer -d ./src/components/players/ -t base-video-component -f

view

Directly create a view based on the current settings.

$ vg view <name>

Arguments:

• ``name``: The name you want to use for the view.

Options:

• ``-d, --destination <destination>``: Override the destination for view.
• ``-p, --template-path <template-path>``: Override template path.
• ``-t, --template <template>``: Override template type. By default it uses the 'view' folder from the template path. With this option you can use a different template folder.
• ``-f, --force``: Force creation of a view. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ vg view home
$ vg view Contact -d ./components/view 
$ vg view video-detail -p ./custom-templates -t detail-view

store

Directly create a store module based on the current settings.

$ vg store <name>

Arguments:

• ``name``: The name you want to use for the store module.

Options:

• ``-d, --destination <destination>``: Override the destination for store module.
• ``-p, --template-path <template-path>``: Override template path.
• ``-t, --template <template>``: Override template type. By default it uses the 'store' folder from the template path. With this option you can use a different template folder.
• ``-f, --force``: Force creation of a store. By default it's impossible to create a component if the destination path doesn't exist. This option forces the creation of a component and will generates the destination folders if they don't exist.

Examples:

$ vg store user
$ vg store shopping-cart -d ./modules 
$ vg store Car -t complex-store

settings

Set or display settings. Without any options it will display the settings. By default it will set the settings locally in a .vuegenerator file. You can also set global settings by using the global option ``-g --global``.

$ vg settings

Options:

• ``-v, --view-destination <destination>``: Set default view destination.
• ``-c, --component-destination <destination>``: Set default component destination.
• ``-s, --store-destination <destination>``: Set default store destination.
• ``-t, --template-path <template-path>``: Set template path.
• ``-l, --log``: Log global or local settings depending on the global flag.
• ``-g, --global``: Set global settings.

Examples:

$ vg settings -l
$ vg settings -v ./view -c ./component -s ./store/modules -t ./template
$ vg settings -g -c ./components

reset

Reset global settings to the defaults.

$ vg reset

show-templates

Open the default template directory. The default templates can be edited to fit your needs.

$ vg show-templates

copy-templates

Copy the default templates to another directory. This is handy when you want to customize the default templates. Don't forget to run ``vg init` or set the template path with `vg settings``.

$ vg copy-templates