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

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

浏览器提示


```bash
Vue warn]: Invalid VNode type: undefined (undefined) 
  at  
  at 

![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>

```

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

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