泰山AI 2022-10-09 18:27 采纳率: 83.3%
浏览 32
已结题

通过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条回答 默认 最新

  • 崽崽的谷雨 2022-10-10 09:34
    关注

    Vue.use(httpVueLoader) 这个加上看看
    https://blog.csdn.net/guoyp2126/article/details/126166787

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月20日
  • 已采纳回答 8月12日
  • 创建了问题 10月9日