npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

@calidae/vue-generate-component

1.0.4 • Public • Published

Vue js component generator

Developed upon the work of vue-generate-component.

CLI util for easy generate Vue js component

Installation

npm install -g @calidae/vue-generate-component

Usage

vgc --help

Create new component

vgc Footer

Will generate a folder called Footer in your current directory with three files :

index.js

import Footer from './Footer'
 
export default Footer

Footer.vue

<template>
  <div class="c-footer">
 
  </div>
</template>
 
<script>
export default {
  name: 'Footer',
  data() {
    return {}
  }
}
</script>

Footer.spec.js

import Vue from 'vue'
import Footer from './index.js'
import { mount, shallow } from '@vue/test-utils'
 
describe('Footer.vue', () => {
  it('is a component', () => {
    const wrapper = mount(Footer)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
 
  it('renders an snapshot', () => {
    const wrapper = shallow(Footer)
    expect(wrapper.html()).toMatchSnapshot('default')
  })
})

Creating a container component

If you want to replicate the structure outlined above but adding a Container component, just add the container flag:

vgc Footer --container

Will modify the index.js file and create a new container component and test file:

index.js

import FooterContainer from './FooterContainer'
 
export default FooterContainer

FooterContainer.vue

<template>
  <div>
    <Footer />
  </div>
</template>
 
<script>
import Footer from './Footer'
 
export default {
  name: 'FooterContainer',
  components: {
    Footer
  },
  data() {
    return {}
  }
}
</script>

FooterContainer.spec.js

import Vue from 'vue'
import FooterContainer from './FooterContainer'
import { mount, shallow } from '@vue/test-utils'
 
describe('FooterContainer.vue', () => {
  it('is a component', () => {
    const wrapper = mount(FooterContainer)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
 
  it('renders an snapshot', () => {
    const wrapper = shallow(FooterContainer)
    expect(wrapper.html()).toMatchSnapshot('default')
  })
})

install

npm i @calidae/vue-generate-component

Downloadsweekly downloads

11

version

1.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability