Vue js component generator

CLI util for easy generation of Vue js components

Installation

npm install -g st-vue-generate-component

Usage

vgc --help

Create new component single file

vgc home

will generate one vue file:

<template lang="html">
  <section class="home">
    <h1>home Component</h1>
  </section>
</template>

<script lang="js">
  export default  {
    name: 'home',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
  .home {

  }
</style>

vgc src/home

will generate one vue file named home within the src folder (folder will be created if it does not currently exist)

Create new component

vgc footer

Will generate five files:

footer.js

export default {
  name: 'footer',
  props: [],
  mounted() {},
  data() {
    return {};
  },
  methods: {},
  computed: {}
};

footer.spec.js

import Vue from 'vue';
import FooterComponent from './index.vue';

// Here are some Jasmine 2.0 tests, though you can
// use any test runner / assertion library combo you prefer
describe('FooterComponent', () => {
  // Inspect the raw component options
  it('has a created hook', () => {
    // expect(typeof FooterComponent.created).toBe('function');
  });
  // Evaluate the results of functions in
  // the raw component options
  it('sets the correct default data', () => {
    // expect(typeof FooterComponent.data).toBe('function')
    // const defaultData = FooterComponent.data();
    // expect(defaultData.message).toBe('hello!');
  });
  // Inspect the component instance on mount
  it('correctly sets the message when created', () => {
    // const vm = new Vue(FooterComponent).$mount();
    // expect(vm.message).toBe('bye!');
  });
  // Mount an instance and inspect the render output
  it('renders the correct message', () => {
    // const Ctor = Vue.extend(FooterComponent);
    // const vm = new Ctor().$mount();
    // expect(vm.$el.textContent).toBe('bye!');
  });
});

footer.html

<section class="footer">
  <h1>footer Component</h1>
</section>

footer.scss

.footer {
}

index.vue

<template src="./footer.component.html"></template>
<script src="./footer.component.js"></script>
<style src="./footer.component.scss" scoped lang="scss"></style>

Create new directive

vgc -d my-directive

will generate:

my-directive.directive.js

import Vue from 'vue';

Vue.directive('my-directive', {
  bind() {},
  // When the bound element is inserted into the DOM...
  inserted(el) {
    // el.focus();
  },
  update() {},
  unbind() {}
});

If you want use postfix in file name, use -- postfix

vgc footer --postfix page

Will generate files with postfix:

• footer.page.js
• footer.page.css
• footer.page.html
• footer.page.spec.js

Change the default file types for html, style, script, and spec

sudo vgc --html jade --style less --script ts --spec ts

Contribute

Based on https://github.com/NetanelBasal/vue-generate-component