press F12 to open browser development window -> network tab to check async loading !
const HelloWorld = vueComponentLoader.get({
id:"hello-world",
baseDir:'./components/HelloWorld/',
style:'./components/HelloWorld/index.less',
async:false,
});
vueComponentLoader.getAll([{
id:"demo",
baseDir:'./components/demo/',
style:'./components/demo/index.less',
}]).then(function(resp) {
let opt = {
router,
data() {
return {
showComp:false,
loading:false,
compId:'hello-world'
}
},
methods: {
},
components:{
'hello-world': HelloWorld,
...resp,
},
}
window.app = new Vue(opt).$mount("#app")
})
const routes = [{
path:'/router-home',
name:'home',
component: vueComponentLoader.get({
id:"/router-home",
baseDir:'./components/home/',
style:'./components/home/index.less',
})
},{
path:'/router-demo',
name:'router-demo',
component: vueComponentLoader.get({
id:"router-demo",
baseDir:'./components/router-demo/',
style:'./components/router-demo/index.less',
})
}];
const router = new VueRouter( { routes } );
new Vue({ router }).$mount("#app")