通过cdn方式 html 引入vue 模板,页面渲染不出来,
浏览器提示
```bash
Vue warn]: Invalid VNode type: undefined (undefined)
at <Sidebar>
at <App>
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/446551113566113.png "#left")
前端代码
<script >
let pageNum = 1;
const { createApp } = Vue
const Sidebar = httpVueLoader('./source/module/sidebar.vue')
createApp({
data() {
return {
records: [],
recentList: [],
hotList: []
}
},
components: {
Sidebar
},
created(){
this.getArticles(1);
this.getHot();
this.getRecent();
this.init();
},
methods: {
getArticles(){
axios.post('/blog/api/articles',Qs.stringify({"pageNumber": pageNum, "pageSize": 10}))
.then((res) => {
// 请求成功返回
const data = res.data.data;
this.records=this.records.concat(data.records);
pageNum++;
})
.catch(function (err) {
// 请求失败返回
console.log(err);
})
.then(function () {
// 不管成功失败都会执行,可以用来关闭加载效果等
});
},
getHot(){
axios.get('/blog/api/hot/articles', {params: {size: 5}})
.then((res) => {
// 请求成功返回
const data = res.data.data;
this.hotList=data;
})
.catch(function (err) {
// 请求失败返回
console.log(err);
})
.then(function () {
// 不管成功失败都会执行,可以用来关闭加载效果等
});
},
getRecent(){
axios.get('/blog/api/recent/articles',{params: {size: 5}})
.then((res) => {
// 请求成功返回
const data = res.data.data;
this.recentList=data;
})
.catch(function (err) {
// 请求失败返回
console.log(err);
})
.then(function () {
// 不管成功失败都会执行,可以用来关闭加载效果等
});
},
init(){
setInterval(()=>{
// 这里调用调用需要执行的方法,1为自定义的参数,由于特殊的需求它将用来区分,定时器调用和手工调用,然后执行不同的业务逻辑
$(".carousel-topNav-next").click();
}, 3000)
}
}
}).mount('#App');
</script>
```