vue+webpack实现异步组件加载

HTML

<input type="button"  @click="showchild" value="show"> //点击按钮后，show为真,先获取child组件，再渲染div内容 
<div id="contain" v-if="show">
    <child></child>
</div>

JS

data () {
    return {
        msg: 'Welcome to Your Vue.js App',
        show:false
    }
},
methods: {
    showchild:function(){
        this.show=true;
    }
},
components: {
    'child': function(resolve) {
        require(['./components/child.vue'], resolve);
    }
} 

注意：加载异步组件的时候，组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真，由于child.vue是异步组件，所以会先ajax获取组件然后渲染。