Vue js component generator 

CLI util for easy generate Vue js component

Installation

``js
npm install -g vue-generate-component
`

Usage

`bash
vgc --help
`

$3

`bash
vgc footer
`

Will generate five files:

footer.js

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

footer.spec.js

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

`html


footer Component


`

footer.scss

`css
.footer {
}
`

index.vue

`html



`

$3

`bash
vgc -s home
`

will generate one vue file:

`javascript



`

$3

`bash
vgc -s home --folder
`

$3

`bash
vgc -d my-directive
`

will generate:

my-directive.directive.js

`javascript
import Vue from 'vue';

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

$3

`bash
vgc footer --postfix page
`

Will generate files with postfix:

- footer.page.js
- footer.page.css
- footer.page.html
- footer.page.spec.js

$3

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

$3

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