.Vue 文件：将结构从“模板：”迁移到 <template></template>答案

【问题标题】：.Vue-File: Migrate structure from "template:'' to <template></template>.Vue 文件：将结构从“模板：”迁移到 <template></template>
【发布时间】：2020-01-31 18:32:11
【问题描述】：

我尝试从工作版本更改我的 .vue 文件（与 laravel 一起使用）的结构，如下所示：

旧的 foo-component.vue：

<script>
    Vue.component("foo-component", {
      data() {
      },

      props: {
      },

      methods: {
        },
      template: `
            <div> Some Content Here </div>
            `
    });
</script>

将其切换到 .vue 文件的其他结构：

新：foo-component.vue：

<template>
        <div> Some Content Here </div>
    </template>

    <script>
        export default {
          name: 'foo-component',
          data() {
          },

          props: {
          },

          methods: {

          },
        }
    </script>

旧版：主 app.js：

Vue.component('foo-component', require('./components/foo-component.vue').default);

    const app = new Vue({
        el: '#app',
        components: {
            OtherComponents
                },
        data:{
        },
        methods: {
        }
    });

新：主 app.js：

Vue.component('foo-component', require('./components/foo-component.vue').default);

    const app = new Vue({
        el: '#app',
        components: {
            OtherComponents
                },
        data:{
        },
        methods: {
        }
    });

但是我在浏览器中收到错误消息：

[Vue warn]: Unknown custom element: <foo-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然后我将“foo-component”添加到组件中：{OtherComponents, foo-component} 但后来事情变得一团糟，浏览器说：

Error: Module build failed: SyntaxError: X:/laragon/www/project/resources/assets/js/app.js: Unexpected token, expected , (38:35)

我做错了什么？

这是我在 laravel 刀片 home.blade.php 中调用 foo 组件的 HTML/视图：

<html>
<head>
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>

<body>
    <div id="app">
            <foo-component></foo-component>
    </div>
    <script src="{{ mix('/js/app.js') }}"></script>
</body>

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你必须在app.js注册你的组件

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

【讨论】：

没错，但这就是我所做的，正如上面在新旧 app.js 中看到的那样，使用：Vue.component('foo-component', require('./components/foo-component. vue').default);
啊，我错过了。
你是如何从其他组件调用 foo-component 的？可以贴代码吗？
啊，我想我通过在 app.js 中添加两行来解决它：“import FooComponent from './components/foo-component.vue';”在组件中：{'foo-component':FooComponent}。 -> 将更新答案:)
谢谢@DinoNumić 我有点困惑，因为似乎根本不需要“Vue.component().default”部分（可以删除，它仍然有效）。

【解决方案2】：

我让它工作的方式是对 app.js 的更新：

Vue.component('foo-component', require('./components/foo-component.vue').default);

import FooComponent from './components/foo-component.vue';

const app = new Vue({
    el: '#app',
    components: {
        OtherComponents,
        'foo-component': FooComponent
            },
    data:{
    },
    methods: {
    }
});

【讨论】：