node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


vue-sass-cli scaffold

vue-sass-cli 脚手架


Generate static-html-sub-compile directory structure.

    vue-sass --template=simple-template.d ${component-name}
    # OR
    vue-sass --template=template.d ${component-name}
    # If you special no template like below line, the template.d was used by default.
    vue-sass ${component-name}

Of couse, you can write your-template.d and, gen folder like this:

    vue-sass --template=your-temp\nlate.d ${component-name}

Directories will be generated:



componentName.js.js is the render js file in dirname webstorm entry;
componentName.js.js will generate a single html with it's own asserts directory in dist folder(configured as default output directory by default.)


component-name.scss just like this:

    @import "./**/*.sass";


component-name.vue is the main vue file of this component,
In order to build separate static html with it's assert correctly for every component,
I suggest you to keeping only one vue file in current folder, When any sub component is need to create, just run this, which is very eary:

    vue-sass sub-cpomonent


All stable file is better to put in this dir, which would be less modifed.


component-name.sass would be edit as this component's own style rule.
Of cause, it will follow the sass sytax, which one don't need bracket qoutes (大括号).
If you are interesting in this 'vue-sass-cli', may you like this sytax, too.


component-name.html will be the template of separate dist entry html.

And component-name.html wouldn't work for the parent (dir's) component, since it's own template html file will be valid.

In order to render vue component correct,
you must make sure the div element in template.html is the same as the component.js mount point.

Everything is easy, isn't it?

Enjoy it !