vue generate component

Gerador de componentes vue js

CLI Util for Easy Gere Vue JS Component

Instalação

 npm install - g vue - generate - component 

Uso

vgc --help

Crie um novo componente

vgc footer

Irá gerar cinco arquivos:

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 >

Crie novo arquivo único componente

vgc -s home

irá gerar um arquivo VUE:

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

Crie novo arquivo único componente dentro da nova pasta

vgc -s home --folder

Crie uma nova diretiva

vgc -d my-directive

irá gerar:

My-Directive.Direction.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 ( ) { }
} ) ;

Se você quiser usar o Postfix no nome do arquivo, use - Postfix

vgc footer --postfix page

Irá gerar arquivos com Postfix:

• Footer.page.js
• Footer.page.css
• Footer.page.html
• Footer.page.spec.js

Altere os tipos de arquivo padrão para HTML, estilo, script e especificação

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

Contribuir

Se você deseja consertar/melhorar os modelos, é bem -vindo a criar um PR.