vgc

vue-generate-component

Vue js component generator

Showing:

Popularity

Downloads/wk

104

GitHub Stars

217

Maintenance

Last Commit

2yrs ago

Contributors

15

Package

Dependencies

9

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Contribute

If you want to fix/improve the templates you're welcome to create a PR.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial