vue-cli-plugin-beansflight
Description
A Vue CLI plugin to generate components or pages.
Support
Component
- [x] SFC(.vue)
- [x] TSX(.tsx)
- [x] JSX(.jsx)
Style
- [x] CSS(.css)
- [x] SCSS(.scss)
- [x] Sass(.sass)
- [x] Less(.less)
- [x] Stylus(.styl)
Usage
Install
vue add vue-cli-plugin-beansflightor
yarn add vue-cli-plugin-beansflight -D
vue invoke generatorsRun
Add a component
yarn create-componentAdd a page
yarn create-pageTemplate
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>