你应该使用extract-text-webpack-plugin这个插件来把你的vue里的css提取出来成单独文件。
new ExtractTextPlugin('css/[name].[contenthash:8].css')
但如果你使用vue-cli这应该是已经配置好了的，你可能是在开发模式中，所以没有提取出来，如果打包后可能就会提取出来。
此外，你如果要按需加载，你也要先做到组件按需加载，
如果是在webpack里就是这么写
router.map({
'/async': {
component: function (resolve) {
require(['./MyComponent.vue'], resolve)
}
}
})
详见：http://router.vuejs.org/zh-cn...
同时，你的ExtractTextPlugin
new ExtractTextPlugin('css/[name].[contenthash:8].css', {
allChuck: true
})
一、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'
}
})
1.数组方法,元素为css的名称，可以在里面使用三目运算<div :class="[ isOne?'one':'', 'two']">数组方法 </div>
2.对象方法，元素键名为css名称，用true和false 来控制是否显示
<div :class="{'one':isOne,'two':true}">对象方法</div>
3.直接加入，加入的内容是css名称，可以通过计算来控制显示的css，名称
<div :class="isOne?'one':'two'" >直接加入</div>
1.数组方法,元素是一个个对象，对象则是style的键值对，当然可以用三目运算控制
<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>
2.对象方法，元素键名为style名称，值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值
<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>
3.直接加入，只要保证得出来的字符串是正确的即可，怎么用都可以
<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>
