vue组件设计基础，一个比较简单的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <flex-rol>hi</flex-rol>
        <script>
        Vue.component('flex-rol',{
            template:'<div><p class="flex-center"></p><slot></slot></div>'
        })
        </script>
    </body>
    <style type="text/css">
        .flex-center{
            display: flex;
            align-items: center;
            flex-direction: column;
            color: blue;
        }

    </style>
</html>

报错
Uncaught TypeError: Vue.component is not a function
at index.html:12（也就是Vue.component 那一行），如何更改？

首先，vue需要实例化，然后挂载到节点上，组件才能进行渲染，具体知识参考官网https://cn.vuejs.org/v2/guide/components.html
改造代码如下：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <flex-rol>hi</flex-rol>
        </div>
         <script>
        Vue.component('flex-rol',{
            template:'<div><p class="flex-center"></p><slot></slot></div>'
        })
        new Vue({ el: '#demo' })
        </script>
    </body>
   
    <style type="text/css">
        .flex-center{
            display: flex;
            align-items: center;
            flex-direction: column;
            color: blue;
        }
    </style>
</html>

有帮助麻烦点个采纳【本回答右上角】，谢谢~~

看看文档发说明把