为什么一个全局组件不能从一个Vue实例中分离到不同的JS文件中？

Question

global.js

var app;
app = new Vue({
    el: "#app",
    data: {
        value: "hello world",
    }
});`

login.js

Vue.component('login', {
   template: '<h1>login</h1>'
})

index.html

<!DOCTYPE html> <html lang="en"> <head>
   <meta charset="UTF-8">
   <title>Daemon</title>
   <script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
   <script src="./js/semantic.min.js" charset="UTF-8"></script>
   <script src="./js/vue.js" charset="UTF-8"></script>
   <link rel="stylesheet" href="./css/semantic.min.css"> </head> <body>
   <div id="app">
       <div class="ui container">
           <div class="ui divider"></div>
           <div class="ui blue button">
               {{value}}
           </div>
           <login></login>
       </div>
   </div>
   <script src="./js/global.js" charset="UTF-8"></script>
   <script src="./js/login.js" charset="UTF-8"></script>
</body>
</html>

现在我得到这样的错误：[Vue warn]: Unknown custom element: <login> - did you register the component correctly? For recursive components, make sure to provide the "name" option.(found in <Root>)

Answer 1

您需要先注册 login 组件，然后才能在其他组件的模板中使用它。

像这样订购脚本：

<script src="./js/login.js" charset="UTF-8"></script>
<script src="./js/global.js" charset="UTF-8"></script>

为什么一个全局组件不能从一个Vue实例中分离到不同的JS文件中？

Why can't a global component be separated from a Vue instance into a different JS file?

vue.js

vue-component

global.js

login.js

index.html