VueJS: How do I use data from main.js in my templates?

Question

I have my Vue scope in my main.js:

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    name: 'Levi'
  }
})

and I want to use it in my template: test.vue :

<p>My name is {{ name }}

I'm using vue-router for all the routing functionality, and that all works fine. But when I try calling name in my template I get

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Any help would be greatly appreciated. Thanks.

Answer 1

只需在我的模板中添加脚本标签并使用module.exports不export default