py-generator

This is a project that is focused on the developer experience. It's aim to make easier the development process by providing many features such as:

• Create Vue components using the vue-class-component approach
• Create Vue filters and registering them into your main app file
• Create Vue routes and registering them into your router file

The process is customizable...

Installation

You'll need to install that npm package using 'npm install --save vue-class-component' or 'yarn add vue-class-component'*

Install this package by running (if you want, use virtualenv):

$ pip install py-generator

It will allow you to run pygen inside your terminal

By running that command, it will print the following lines:

usage: pygen [recipe]
  available recipes
    - component (use for creating a component)    
    - filter (use for creating and registering a filter)
    - route (use for registering a route)
  
  examples:    
    - pygen component
    - pygen filter    
    - pygen route
    
  ** Each command will prompt for it's own required arguments **

Configuration

You need to create a configuration file for specifying the folders and files needed by the process. It can be done by running the following any of the mentioned commands:

$ pygen [recipe]

Process details

Case 1 - Creating a Component

Execute the following command:

$ pygen component

It will show to us the next prompt:

$ pygen component
Please specify a name for the component:

Now, you can input the name for our component. Assume that you enter "ContactForm"

$ pygen component
Please specify a name for the component: ContactForm

Now the process will create the following structure:

• ContactForm
  • ContactFormContactForm.component.js
  • ContactForm.raw.html
  • ContactForm.scoped.scss
  • ContactForm.vue
  • index.js

$ pygen component
Please specify a name for the component: ContactForm
Created successfully: ContactForm.component.js
Created successfully: ContactForm.scoped.scss
Created successfully: ContactForm.raw.html
Created successfully: ContactForm.vue
Created successfully: index.js

Case 2 - Creating a Filter

Before starting the process, you'll need to add the next wildcard to your router file /* __filter__ */

Here you are an example

import Vue from 'vue';
import App from 'Components/App';
import router from './router'
import store from 'Services/store'
import filters from './filters'

/* __filter__ */

// eslint-disable-next-line no-new
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
});

After that, proceed executing the following command:

$ pygen filter

It will show to us the next prompts:

$ pygen filter
Please specify a name for the filter:

Now, you can input the name for our filter. Assume that you enter "pluralize"

$ pygen filter
Please specify a name for the filter: pluralize

Now the process will create the following files: Created successfully: pluralize.filter.js

And also, it will be registered in your main file using

Vue.filter('pluralize', filters.pluralize);

Case 3 - Creating a route

Before starting the process, you'll need to add the next wildcard to your router file /* __route__ */

Here you are an example

import Vue from 'vue';
import Router from 'vue-router';
import Home from 'Components/Home';
import Beers from 'Components/Beers';

Vue.use(Router);

const AppRouter = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        }, {
            path: '/beers/',
            name: 'beers',
            component: Beers
        }/* __route__ */
    ]
});

export default AppRouter;

After that, proceed executing the following command:

$ pygen route

It will show to us the next prompt:

$ pygen route
Please specify a name for the route: 
Please specify a valid component name: 
Please specify a slug for the route: 

Now, you can input the name for our filter. Assume that you enter "pluralize"

$ pygen route
Please specify a name for the route: ranking
Please specify a valid component name: MostLiked
Please specify a slug for the route: ranking

Now, it will register in your router file the following route

{
    path: '/ranking/',
    name: 'ranking',
    component: MostLiked
}