Javascript VueJS数据（）不工作

我正在尝试制作VueJS应用程序，但即使是最简单的示例，我也失败了。 我使用的是Laravel5.3，带有对VueJS的预构建支持（版本1，我也尝试了版本2）

下面是我的示例.vue组件

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

这是控制台中每次都会出现的错误：

[Vue warn]：属性或方法“名称”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性。（在组件中找到）

有什么想法吗？怎么了？

---

谢谢

调用模板中的组件

Vue.component（'example'{
模板：`{name}}`，
数据（）{
返回{
姓名：“约翰·多伊”
}
}
})
const app=新的Vue({
el:“#应用程序”
})

---

在

脚本中

标记而不是

导出默认值

使用：

module.exports = {
  data() {
    return { counter: 1 }
  }
}

---

这应该适用于您

问题是您试图从该文件加载组件“示例”，但您没有给出名称。你应使用：

导出默认值{
名称：“示例”，
数据（）{
返回{
姓名：“约翰·多伊”
}
}
}

或者通过以下方式加载组件（不确定是否需要扩展.vue）：

require（'./exmaple'）.default（）；

如果您使用的是Babel，您也可以使用以下语法加载组件，而无需为其命名：

从导入示例。/Example

---

另外，如果你使用Babel，也可以通过结帐获得更多信息是的，它是这样工作的。但我真的想用‘单文件组件’这是完全一样的，不是吗？导入单文件组件，并用导入的组件名称替换组件选项。哦，不。这是我试图实现的，也是您向我展示的。这没什么区别，但你知道，细节很重要：你敢使用webpack或browserify吗？是的，Laravel已经准备好了所有这些

module.exports = {
  data() {
    return { counter: 1 }
  }
}