__     __                             ____    _          ____   _       ___
 \ \   / /  _   _    ___              / ___|  | |__      / ___| | |     |_ _|
  \ \ / /  | | | |  / _ \    _____    \___ \  | '_ \    | |     | |      | |
   \ V /   | |_| | |  __/   |_____|    ___) | | | | |   | |___  | |___   | |
    \_/     \__,_|  \___|             |____/  |_| |_|    \____| |_____| |___|

This is my awesome CLI tools for scaffolding apps that was made with Vue.js.

Because I can ;) But for real - I love Vue.js and all my last apps was made with this awesome framework. That's why I created a tool that makes my job easier.

It's simple:

npm install -g @ddosdor/vue-sh-cli

or

yarn add global @ddosdor/vue-sh-cli

After installing this tool, the following command will be available in the console:

vsh menu

results:

    Usage: vsh [command] [options]

    Commands:
      menu      ........................ show CLI menu
      component ........................ create new component from template
      view      ........................ create new view from template
      module    ........................ create new Vuex module from template
      filter    ........................ create new filter from template

In order to create a new component, you should enter in the console:

vsh component --name MyNewAwesomeComponent

As a result, a new component will be created, according to the following structure:

- src
  | - components
      | - MyNewAwesomeComponent
          | - component.js
          | - index.vue
          | - style.sass

I prefer components as a separate files, so:

• component.js - this file is for compononent logic
• index.vue - this file is main Vue component file
• style.sass - this file is for style (for now only with SASS)

The tool also allows you to generate a component as a single file component using the options:

vsh component --name MyAwesomeComponent --single

As a result, a new component will be created, according to the following structure:

- src
  | - components
      | - MyNewAwesomeComponent.vue

Available options:
  - name (*required)      ....... name of the new component
  - single (optional)     ....... create component as a single *.vue file
  - functional (optional) ....... new component is created as a functional component
  - parent (optional)     ....... creates a new component in the folder provided in the option
  - test (optional)       ....... generate unit test for component

Example:
  * Create component with 'MyAwesomeComponent' name as a separate files (*.sass, *.js, *.vue)
  in 'src/components/MyAwesomeComponent' directory:

  $: vsh component --name MyAwesomeComponent --functional


  * Create component with 'MyAwesomeFunctionalSingleComponent' as a single file component
  in 'src/components/CommonComponents/' directory:

  $: vsh component --name MyAwesomeFunctionalSingleComponent --functional --single --parent CommonComponents

vsh component --help

In order to create a new view, you should enter in the console:

vsh view --name MyNewAwesomeVuew

As a result, a new view will be created, according to the following structure:

- src
  | - view
      | - MyNewAwesomeView.vue

This command generate view always as a single file component.

Available options:
  - name (*required)      ....... name of the new component
  - parent (optional)     ....... creates a new component in the folder provided in the option
  - test (optional)       ....... create unit test for view

Example:
  * Create view with 'MyNewView' name in 'src/views/MyNewView' directory:

  $: vsh view --name MyNewView


  * Create view with 'MyNewView' as a single file component in 'src/views/UserProfile/' directory:

  $: vsh view --name MyNewView --parent UserProfile

vsh view --help

In order to create a new Vuex module, you should enter in the console:

vsh module --name MyNewModule

As a result, a new Vuex module will be created, according to the following structure:

- src
  | - store
      | - modules
          | - MyNewModule
              | - actions.js
              | - index.js
              | - mutations-type.js
              | - mutations.js

As with the component, I prefer the division of responsibility into individual files:

• actions.js - all actions for new module
• index.js - main file for new module (here is initial state and all getters)
• mutations-type.js - all available mutations types for new module
• mutations.js - all mutations

Available options:
  - name (*required)      ....... name of the new module

Example:
  * Create Vuex module with 'MyModule' name

  $: vsh module --name MyModule

vsh module --help

There are several options that you can change by your preferences. To do this, in root folder of your app, call the command:

vsh init

As a result, a .vshclirc.json file will be created. Here some setting, that can be changed.

  "directories": {
    "views": "views",
    "components": "components",
    "vuex": "store",
    "modules": "modules",
    "unitTests": "__tests__"
  }

Here you can indicate in which folders new items are to be created. For example, if in your project all the views from the router are in a folder called 'pages', you can indicate it in this way:

...
"views": "pages",
...

  "settings": {
    "rootSrcDirectory": "src",
    "alwaysCreateSpecFiles": true,
    "defaultComponentStyle": "separate"
  },

Here youe can change some default settings:

rootSrcDirectory - source directory in your project. For example, if main root folder is also your source folder (like in Nuxt.js apps), you can indicate this like:

...
"rootSrcDirectory": "/",
...

alwaysCreateSpecFiles - here you can decide whether to always create a unit test for it when generating a new component or view. Default is: false

defaultComponentStyle - default style when genereting new component, set: separate if you prefer the division of responsibility into individual files, or sfc if you want Single File Component.

It is possible to download ready-made elements from the repository. In order to do this you need to add sources in the file '.vshclirc.json'.

For example:

  "sources": {
    "blog": {
      "remote": "[email protected]:ddosdor/vue-blog-app-example.git",
      "path": "src/components",
      "dest": "components"
    }
  }

Adding a source as a source of components, repository from my project - vue-blog-app-example. To identify the source from which I will be downloading, name it: blog'.

Now I can download the selected component from the repository to my current project.

vsh get --source blog --name AddNewPost.vue

Each source added to the '.vshclirc.json' file must have parameters:

• remote - repository source
• path - path to the source of elements from the repository (for example path: src/components/common i source for all components common from te repository)
• dest - destination folder in your project (for example 'components/common')

      Usage: vsh get [options]

      Available options:
        - source (*required)   ....... repo source defined in settings file
        - name (*required)     ....... name of element from repo
        - parent (optional)    ....... downloading a new element in the folder provided in the option
        
      Example:
      * Download component 'MyAwesomeComponent' from source 'components' defined in .vshclirs.json

      $: vsh get --source components --name MyAwesomeComponent

      * Download component 'DividerLine' from source 'helpers' defined in .vshclirs.json to 'Helpers' directory

      $: vsh get --source helpers --name DividerLine --parent Helpers  

• you need to have a git installed
• the source for the repository must be with the SSH - for example key: git@github:user/repo.git
• you must have access to the repository through your public key

Please consider that this is an experimental functionality and may not work properly. I tested it on my local gitlab server.

Edit: This functionality uses the option: git archive and unfortunately Github doesn't support it. -> isaacs/github#554

I still have some ideas that I would like to implement for this tool. So far, this is a beta version, that's why every feedback is welcome. :)

See Meanstack.eu - voil See Meandjs - ddosdor

MIT

Ready to Rock&Roll, Hell Yeah!