泰山AI 2022-10-09 18:27 采纳率: 33.3%
浏览 21

通过cdn方式 html 引入vue 模板,页面渲染不出来,

通过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>

```

  • 写回答

3条回答 默认 最新

  • Iam_楠 前端领域新星创作者 2022-10-10 09:33
    关注

    id为 #App,这个容器有吗?

    评论

报告相同问题?

问题事件

  • 创建了问题 10月9日

悬赏问题

  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码