vsnippet

前端视图层的片段组件库。使用scss、vue等形式编写和组织。既可以作为vue组件库，又可以作为view层公共代码库。可以据此建立团队使用的基础样式和组件库。

Philosophy

使用开发vue组件的方式定义静态的基础组件以及组件的嵌套，html和css遵循就近原则，允许多种模板开发html，使用sass实现样式规则的更好复用，并利用vue的scope样式避免css污染。

静态html/css合成

调用compose，以一个vue文件为入口，将scss、vue等文件合成一对html、css。

命令行

执行脚本：

$ node path/to/compose.js -v path/to/view -o path/to/output

或配置npm命令：

"scripts": {
    "compose": "vcompose -v path/to/view -o path/to/output"
}

Node.js API

const compose = require('@shenfe/vsnippet');
compose('path/to/view', 'path/to/output');

示例

运行node ./compose.js -v example2，即在example2中生成index.html、index.css文件，是example2的完整html和css。

组件example2的vue形式源码：

<template lang="pug">
div hello
  example1
</template>

<script>
import Example1 from '../example1'
export default {
  components: {
    Example1
  }
}
</script>

合成的组件example2的html、css：

<div>hello<span data-v-24a2967e="" class="name">world</span></div>

.name[data-v-24a2967e]{color:#333}
span{background-color:#000}

Thanks

• prerender-spa-plugin