NetanelBasal / Vue Generate Component
Vue js component generator
Stars: ✭ 206
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Generate Component
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+22.82%)
Mutual labels: generator, components, vuejs2
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-50.97%)
Mutual labels: components, vuejs2
Vue Form Generator
📋 A schema-based form generator component for Vue.js
Stars: ✭ 2,853 (+1284.95%)
Mutual labels: generator, vuejs2
reactcci
React create component interactive CLI
Stars: ✭ 49 (-76.21%)
Mutual labels: components, generator
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (+67.48%)
Mutual labels: components, vuejs2
Vue2 Transitions
✨ Reusable Vue 2 transition components
Stars: ✭ 718 (+248.54%)
Mutual labels: components, vuejs2
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+343.69%)
Mutual labels: components, vuejs2
Vue Generator
A CLI generator for Vue components, views and store modules
Stars: ✭ 111 (-46.12%)
Mutual labels: generator, vuejs2
Crank
Write JSX-driven components with functions, promises and generators.
Stars: ✭ 2,487 (+1107.28%)
Mutual labels: components
Ivory
IVORY is simple and highly customizable CSS framework, gives you all to build your pages faster and easier.
Stars: ✭ 196 (-4.85%)
Mutual labels: components
Apigcc
一个非侵入的api编译、收集、Rest文档生成工具。工具通过分析代码和注释,获取文档信息,生成RestDoc文档。
Stars: ✭ 198 (-3.88%)
Mutual labels: generator
Php Ulid
A PHP port of alizain/ulid with some minor improvements.
Stars: ✭ 203 (-1.46%)
Mutual labels: generator
Laravel Tournaments
Laravel Package that allows you to generate customizable tournaments trees.
Stars: ✭ 196 (-4.85%)
Mutual labels: generator
Hermes
Golang package that generates clean, responsive HTML e-mails for sending transactional mail
Stars: ✭ 2,379 (+1054.85%)
Mutual labels: generator
Easy Dnd
A drag and drop implementation for Vue.js 2 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
Stars: ✭ 202 (-1.94%)
Mutual labels: vuejs2
Bit
A tool for component-driven application development.
Stars: ✭ 14,443 (+6911.17%)
Mutual labels: components
Vue js component generator
CLI util for easy generate Vue js component
Installation
npm install -g vue-generate-component
Usage
vgc --help
Create new component
vgc footer
Will 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>
Create new component single file
vgc -s home
will 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>
Create new component single file inside new folder
vgc -s home --folder
Create new directive
vgc -d my-directive
will 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() {}
});
If you want use postfix in file name, use -- postfix
vgc footer --postfix page
Will generate files with postfix:
- footer.page.js
- footer.page.css
- footer.page.html
- footer.page.spec.js
Change the default file types for html, style, script, and spec
sudo vgc --html jade --style less --script ts --spec ts
Contribute
If you want to fix/improve the templates you're welcome to create a PR.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].