Newline Proliferating Maniac
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    vue-generate-componentpublic

    Vue js component generator Awesome

    CLI util for easy generate Vue js component

    Installation

    npm install -g vue-generate-component

    Usage

    vgc --help

    Create new component

    vgc footer

    Will generate five files:

    footer.component.js

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

    footer.component.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.component.html

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

    footer.component.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 component single file

    vgc -s 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>

    Create new component single file inside new folder

    vgc -s home --folder

    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() {
     
      }
    })

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

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

    PR ME!!!

    If you want to fix/improve the templates please PR ME.

    install

    npm i vue-generate-component

    Downloadsweekly downloads

    77

    version

    1.3.0

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar