上面代码 index请在data里面定义
按需加载，可样式是写在.vue模板中的，访问另一个页面样式就会追加到head标签中，访问的越多head标签的style标签也就越多，即便style标签加入scoped可以避免样式冲突:后来我查了下有使用extract-text-webpack-plugin将css提取合并的。
这个代码：
import 'xx.css' or require('xx.css')
一、Vue css过渡的基本语法<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
你可以在同一元素上通过动态绑定实现不同的过渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
