CLI util for easy generate Vue js component
npm install -g vue-generate-componentvgc --helpvgc footerWill 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>vgc -s homewill 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>vgc -s home --foldervgc -d my-directivewill 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() {} });vgc footer --postfix pageWill generate files with postfix:
- footer.page.js
- footer.page.css
- footer.page.html
- footer.page.spec.js
sudo vgc --html jade --style less --script ts --spec tsIf you want to fix/improve the templates you're welcome to create a PR.