Vue组件引入报错，直接写到Vue实例内却正常，求解


html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件title>
    <script src="https://unpkg.com/vue@next">script>
head>

<body>
    <div id="root">div>
body>
<script>
    const app = Vue.createApp({})
    const vueComponent = {
        data() {
            return {
                msg: '你按下了按钮',
                count: 0
            }
        },
        methods: {
            btnClick() {
                alert(this.msg + ++this.count + '次')
            }
        },
        template: `
        
        按钮按下了{{count}}次div>
        `

    }
    app.component("my-alert", vueComponent);
    app.mount('#root');
script>

html>

如上述代码，组件运行后会报错：

vue@next:1616  [Vue warn]: Component is missing template or render function. 
  at 
warn$1 @ vue@next:1616
finishComponentSetup @ vue@next:8759
setupStatefulComponent @ vue@next:8661
setupComponent @ vue@next:8583
mountComponent @ vue@next:6945
processComponent @ vue@next:6920
patch @ vue@next:6522
render @ vue@next:7680
mount @ vue@next:5926
app.mount @ vue@next:10819
(匿名) @ component.html:74

如果不使用组件，直接写到实例里面的话能够正常跑，但不知道组件的引入哪里出错了，望指点。

只在js中定义了自定义组件，而并未在html中使用自定义组件，故存在渲染错误。且自定义组件只能在Vue挂载的标签内使用。

你可以看下这个问题的回答https://ask.csdn.net/questions/7571090
这篇博客也不错, 你可以看下VUE项目从详情页退回列表页，保留列表页的筛选条件（筛选条件为单选），以及刷新后恢复默认的一个筛选状态
除此之外, 这篇博客: vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式中的 Vue如何根据屏幕的滚动展示不同样式的导航栏，即超过某一位置后，更改导航栏的样式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
闲话少说，先上效果图

可以看到，当页面超出某一位置时，主导航消失，副导航显示，当页面重新回到该位置时，主导航会再次显示
简单说下原理，其实页面当中本身就存在着两个导航栏，只是通过v-show来控制他们俩之间的显隐
而副导航是固定在浏览器窗口的，所以他的position必须是fixed，即相对浏览器窗口进行定位
剩下的事情就是我们监听页面的滚动高度来判断在什么时刻进行动画效果的展示
原理是不是很简单！原理搞懂后，我们就抓紧实现，首先你的demo上一定要有足够的高度可以使页面上下滚动，做好这一点之后，我们开始编写代码
首先两个导航栏是同级的关系，关于导航栏中细节的样式就不多阐述了，主要看大体代码
我使用的编译器是stylus，与sass的编写方式略有不同
```
.nav-absolute
    position : absolute
    left : 0
    top : 0
    right : 0
    width : 100%
    background : url(../assets/img/31.png)
    background-repeat : no-repeat
    background-size : cover
    width : inherit
    height : 260px
    padding : 30px 0
```
首先是主导航，父级position一定要给好relative，否则absolute会找与之最相近的父级（父级可为relative也可absolute），若都没有则相对浏览器窗口进行定位，那我们的效果就是实现不了了
其次是副导航的样式，即要相对窗口进行定位
```
.fixed-wrapper
    position : fixed
    left : 240px
    top : 0
    right : 0
    width : 100%
    background : url(../assets/img/fixed-nav.png)
    background-repeat : no-repeat
    background-size : cover
    width : inherit
    height : 60px
    padding : 5px 0
    z-index : 99!important
```
接下来要开始监听窗口滚动的位置
```
scrollLength () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const top = document.documentElement.scrollTop
      console.log(scrollTop)
      if (scrollTop > 120) {
        let opacity = top / 240
        opacity = opacity > 1 ? 1 : opacity
        this.showOpacity = { opacity }
        this.showNav = false
      }
      if (scrollTop < 240) {
        this.showNav = true
      }
    }
```
给大家看一下打印的监听高度

大家可以看到在不同位置打印出的不同高度，这里我选择的是当高度大于120时开始进行动画效果，那么下面的含义其实就是我要控制主导航栏消失时opacity的效果，即让他有一个慢慢消失的动画效果（虽然消失的还是挺快的- - 、），这里的showNav是提前在data中声明好的，在两个导航栏父元素的div中分别加入v-show=“showNav"和v-show=”!showNav"即可
到这里整个动画效果就实现啦！是不是很简单
希望我们共同进步，如有更高效更简洁的实现方法还望大佬不吝赐教！
您还可以看一下徐照兴老师的Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇课程中的为条件查询设置重置功能小节, 巩固相关知识点