Vue js component generator
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
lib bump version Jun 11, 2018
.babelrc 1.0.0 Nov 30, 2016
.gitignore Postfix Jun 9, 2018
Gulpfile.js 1.0.0 Nov 30, 2016
README.md update readme Jun 11, 2018
package-lock.json Postfix Jun 9, 2018
package.json bump version Jun 11, 2018

README.md

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

  }
})

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

PR ME!!!

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