Vue.js 理解Vue中的导出语句

我来自React，坦率地说，Vue对我来说似乎有很大的不同，即使是在Javascript方面

从锅炉板代码（HelloWorld.vue）中，假设我们有以下代码片段

 <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br />
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
            >vue-cli documentation</a
          >.
        </p>
</template>


<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;

</style>

但在上面的Vue片段中，我无法理解

export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};

导出此对象的意义是什么

---

另外，如果我需要，我将在哪里编写我的函数、类？

在

export default{}

上花括号内的所有内容，包括方法和数据，都将被导出，并且可以使用

import

导入，就像您在React上的示例一样

import Whatever from "./location"

我只是想回答你的问题

Also, where would If suppose I need to will I write my functions, class?

方法和其他数据可以包含在

export default{}

上的大括号内。比如说,

<script>
  export default {
    name: "HelloWorld",
    props: {
      message: {
        type: String
      }
    },
    data() {
      return {
        // put any data here, e.g.,
        isVueDeveloper: true
      }
    },
    methods: {
      // put any methods here, e.g.,
      firstMethod() {
        return;
      }
    }
  }
</script> 

导出默认值{
名称：“HelloWorld”，
道具：{
信息：{
类型：字符串
}
},
数据（）{
返回{
//在此处输入任何数据，例如。，
isVueDeveloper：对
}
},
方法：{
//在此处放置任何方法，例如。，
第一种方法（）{
回来
}
}
}

它知道要导出什么，因为它紧跟在单词

导出默认值之后。
{}
中的所有内容都会作为默认值导出。可能会编辑@ceejayoz的副本。很难说“重要性”是什么意思，但其重要性与导出JavaScript中的任何函数或对象相同。您正在创建一段具有自己属性和函数的封装代码。您可以在
方法
属性中包含其他函数，或作为辅助函数导入。如果需要，还可以在导出上方的脚本标记内编写函数。
Also, where would If suppose I need to will I write my functions, class?

<script>
  export default {
    name: "HelloWorld",
    props: {
      message: {
        type: String
      }
    },
    data() {
      return {
        // put any data here, e.g.,
        isVueDeveloper: true
      }
    },
    methods: {
      // put any methods here, e.g.,
      firstMethod() {
        return;
      }
    }
  }
</script>