javascript - 在 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. 模板
2. 脚本
3. 风格

<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>

之后，您可以在页面/组件中使用您的组件/脚本，还有什么。注册导入的组件后，您可以在 HTML 标记中使用它:

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