@calidae/vue-generate-component
Vue js component generator
Last updated 4 months ago by afontcu .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @calidae/vue-generate-component 
SYNC missed versions from official npm registry.

Vue js component generator

Developed upon the work of vue-generate-component.

CLI util for easy generate Vue component structure.

Installation

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

If you want to try it out without polluting your global npm, you can use npx:

npx @calidae/vue-generate-component [ARGUMENTS]

Usage

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="Footer">
    
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>

Footer.spec.js

import Footer from './index.js'
import { mount } from '@vue/test-utils'

describe('Footer.vue', () => {
  it('is a component', () => {
    const wrapper = mount(Footer)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('renders main node', () => {
    const wrapper = mount(Footer)
    expect(wrapper.classes()).toContain('Footer')
  })

  it('renders a snapshot', () => {
    const wrapper = mount(Footer)
    expect(wrapper.html()).toMatchSnapshot('default')
  })
})

Creating a folder with Container Component

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

vgc Footer --container

In addition to previously outlined files, this command will modify index.js:

index.js

import FooterContainer from './FooterContainer'

export default FooterContainer

and create 2 new files:

FooterContainer.vue

<template>
  <Footer />
</template>

<script>
import Footer from './Footer'

export default {
  name: 'FooterContainer',
  components: {
    Footer
  },
  data () {
    return {}
  }
}
</script>

FooterContainer.spec.js

import FooterContainer from './FooterContainer'
import { mount } from '@vue/test-utils'

describe('FooterContainer.vue', () => {
  it('is a component', () => {
    const wrapper = mount(FooterContainer)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('renders a snapshot', () => {
    const wrapper = mount(FooterContainer)
    expect(wrapper.html()).toMatchSnapshot('default')
  })
})

Disclaimer

This project tries to solve tedious copy&paste operations from our daily workflow. Please notice that the generated files will require some external libraries such as Vue or @vue/test-utils. Make sure these libraries are available in your project.

TODO

  1. Add tests(!)
  2. Add ability to define folder path (now it only creates a folder in the current directory)
  3. ...

Current Tags

  • 1.1.1                                ...           latest (4 months ago)

11 Versions

  • 1.1.1                                ...           4 months ago
  • 1.1.0                                ...           4 months ago
  • 1.0.8                                ...           7 months ago
  • 1.0.7                                ...           9 months ago
  • 1.0.6                                ...           9 months ago
  • 1.0.5                                ...           9 months ago
  • 1.0.4                                ...           9 months ago
  • 1.0.3                                ...           9 months ago
  • 1.0.2                                ...           9 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 12
Last Day 0
Last Week 0
Last Month 23
Dependencies (9)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |