Vue 单文件
说明
*Vue 2.* 版本的 parser，不支持1.版本的 vue 单文件。
参考Vue官方说明：http://cn.vuejs.org/guide/application.html
<template>
<div class="box">
<span>{{a+b}}</span>
<my-comp></my-comp>
</div>
</template>
<script>
import B from './b.vue';
export default {
data(){
return {
a: 1,
b: 2
};
},
components: {
'my-comp': B
}
}
</script>
<style scoped>
.box{
background: red;
width: 100px;
height: 100px;
}
</style>
CSS Modules
支持与 webpack-vue-loader 相同的 scoped style，自动添加属性到节点上。
在 style 标签上添加 module 属性，即可在 vue 组件中使用 CSS Modules,
可在组件内部通过 this.$style 来获取 modules。
<template>
<div :class="$style.box">
<div :class="[$style.foo, $style.bar]"></div>
</div>
</template>
<script>
import $ from 'jquery';
export default {
methods: {
bz(){
if ($(this.$el).hasClass(this.$style.box)) {
}
}
}
}
</script>
<style module>
.box{
background: red;
}
.foo.bar{
width: 100px;
height: 100px;
}
</style>
module可以命名：
<template>
<div :class="$foo.box"></div>
</template>
<style module="foo">
.box{
background: red;
}
</style>
已知问题