This yeoman generator speeds up the creation of Vue.js components, especially in case of the ones written with separated files.
- yeoman generator =>
npm install -g yo
$ npm install -g generator-vuecomponent
$ yo vuecomponent
- Create separeted files ? (Y/n) :
If yes then a structure like this will be created:
|--ComponentName/
|--ComponentName.vue
|--componentName.js
|--componentName.css (sass, scss ...)
|--componentName.html (pug, .njk, ...)
In which ComponentName.vue requires the other files like this
<template src="./componentName.pug" lang="pug"></template>
<script src="./componentName.js"></script>
<style src="./componentName.sass" lang="sass?indentedSyntax"></style>
Otherwise it will be used the same structure without the src="..."
option.
-
The name of the component in lowecase: straightforward
-
Extension of the template engine you're using (default to standard HTML): For example if you are using pug it is pug, for Nunjucks it is njk. Avoid the dot ".", type just the extension.
-
Extension of the style language you're using (default to standard css): just like for the html template, note that for sass language, the option
?indentedSyntax
will automatically be added.