Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NetanelBasal/vue-generate-component
Vue js component generator
https://github.com/NetanelBasal/vue-generate-component
components generator vuejs vuejs2
Last synced: 6 days ago
JSON representation
Vue js component generator
- Host: GitHub
- URL: https://github.com/NetanelBasal/vue-generate-component
- Owner: NetanelBasal
- Archived: true
- Created: 2016-11-30T15:32:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-04T15:25:02.000Z (over 4 years ago)
- Last Synced: 2024-04-23T23:03:49.566Z (7 months ago)
- Topics: components, generator, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 377 KB
- Stars: 222
- Watchers: 14
- Forks: 81
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-generate-component - generate-component?style=social) - 轻松生成Vue js组件的CLI工具 (辅助工具)
- awesome-github-vue - vue-generate-component - 轻松生成Vue js组件的CLI工具 (辅助工具)
- awesome-github-vue - vue-generate-component - 轻松生成Vue js组件的CLI工具 (辅助工具)
- awesome - vue-generate-component - 轻松生成Vue js组件的CLI工具 (辅助工具)
README
# Vue js component generator [](https://github.com/sindresorhus/awesome)
CLI util for easy generate Vue js component
## Installation
```js
npm install -g vue-generate-component
```
## Usage
```bash
vgc --help
```
### Create new component
```bash
vgc footer
```
Will generate five files:
**footer.js**
```javascript
export default {
name: 'footer',
props: [],
mounted() {},
data() {
return {};
},
methods: {},
computed: {}
};
```
**footer.spec.js**
```javascript
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**
```html
footer Component
```
**footer.scss**
```css
.footer {
}
```
**index.vue**
```html
```
### Create new component single file
```bash
vgc -s home
```
will generate one vue file:
```javascript
home Component
export default {
name: 'home',
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
.home {
}
```
### Create new component single file inside new folder
```bash
vgc -s home --folder
```
### Create new directive
```bash
vgc -d my-directive
```
will generate:
**my-directive.directive.js**
```javascript
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
```bash
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
```bash
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.