在Nuxt中将脚本/模块/组件导入页面的正确方法？

Question

我是js，vue和nuxt的新手，因此对于将脚本/模块/组件导入HTML页面并运行它的正确和最佳方法感到非常困惑。

例如，我知道这可用于js脚本中的事件侦听器：

<template>
<div>
<button id="importJS">Go!</button>
</div>
<template>

<script src="~/index.js"></script>

但是这样更好吗？：

@import "~/index.js"

<template>
<div>
<button id="importJS">Go!</button>
</div>
<template>

和/或仅应将主要功能作为模块/组件导出，如下所示：：

module.exports = JSexport;

然后有这样的导入？：

<JSexport />

还是这样？：

<JSexport></JSexport>

总而言之，我的问题是规范的方式是什么，为什么会这样？

非常感谢！

Answer 1

非常简单。如果您创建页面或组件，那么您将具有如下结构：

您一直在追随：

1. Template
2. Script
3. style


<template>
   <div class="some_div"> {{ page_name }} </div>
</template>

<script>
export default {
   data(){
      return {
         page_name: "test page"
      }
   }
}
</script>

<style>
.some_div {
   width: 100%;
   height: 100px;
   background: green;
}
</style>

要导入其他组件或脚本，您需要在脚本标记内使用import

<script>
import someScript from "from/some/path/script.js";
import someComponent from "@/components/someComponent.vue;
export default {
   data(){
      return {
         page_name: "test page"
      }
   },
   components: {
      someComponent // dont forget to register your component after you import it
   }
}
</script>

此后，您可以在页面/组件内部使用ur组件/脚本。注册导入的组件后，可以在HTML标记内使用它：

<template>
   <div class="some_div"> 
      {{ page_name }}
      <someComponent></someComponent>
   </div>
</template>

Answer 2

我对vue的文档一见钟情，官方页面很棒。

您可以在Vue Style guide中找到您问题的所有正式答案。它有很多关于做什么或坏事的示例：