vue-generate-component-gbb
v1.0.2
Published
This project its a fork from library: Vue js component generator
Downloads
6
Maintainers
Readme
This is a fork from origin library: Vue js component generator (https://github.com/NetanelBasal/vue-generate-component)
CLI util for easy generate Vue js component
Installation
npm install -g vue-generate-component-gbb
Usage
vgc --help
Create new component
vgc footer
Will generate five files:
footer.ts
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class {{name | lucaoCase }} extends Vue {}
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.ts"></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">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class {{name | lucaoCase }} extends Vue {}
</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.ts
- 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.