vue-cli-plugin-generators

Description

A Vue CLI plugin to generate components or pages.

Support

Component

• SFC(.vue)
• TSX(.tsx)
• JSX(.jsx)

Style

• CSS(.css)
• SCSS(.scss)
• Sass(.sass)
• Less(.less)
• Stylus(.styl)

Usage

Install

vue add vue-cli-plugin-generators

or

yarn add vue-cli-plugin-generators -D
vue invoke generators

Run

Add a component

yarn add-component

Add a page

yarn add-page

Template

Component

JSX/TSX

/**
 * @file HelloWorld
 */
import { defineComponent, ref } from 'vue';

import './index.css';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const str = ref('World');

    /**
     * @function ChangeStr
     * @description handle str change
     */
    const handleStrChange = () => {
      str.value = 'Vue';
    };

    return {
      str,
      handleStrChange
    };
  },
  render() {
    const { str, handleStrChange } = this;

    return (
      <div className="HelloWorld_container">
        <h1>Hello{str}!</h1>
        <button onClick={handleStrChange}>Change Hello</button>
      </div>
    );
  }
});

SFC

<template>
  <div class="HelloWorld_container">
    <h1>Hello{{ str }}</h1>
    <button @click="handleStrChange">Change Hello</button>
  </div>
</template>

<script>
/**
 * @file HelloWorld
 */
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const str = ref('World');

    /**
     * @function ChangeStr
     * @description handle str change
     */
    const handleStrChange = () => {
      str.value = 'Vue';
    };

    return {
      str,
      handleStrChange
    };
  }
});
</script>

<style>
</style>