将脚本/模块/组件导入Nuxt页面的正确方法? [英] Correct way to import a script / module / component into a page in Nuxt?

问题描述

我是js，vue&的新手nuxt非常困惑将脚本/模块/组件导入HTML页面并运行它的正确和最佳方法是什么.

I'm new to js, vue & nuxt so quite confused about what is the correct and best way to import a script / module / component into an HTML page and run it.

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

For example, I know that this works with an event listener in the js script:

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

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

And / or should only the main function be exported as a module / component something like this?:

module.exports = JSexport;

然后导入这样的内容?:

With then an import like this?:

<JSexport />

还是这样?

<JSexport></JSexport>

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

In summary, my question is what is the canonical way and why is that the case?

非常感谢！

推荐答案

非常简单.如果创建页面或组件，则结构如下:

Its pretty simple. If you create an page or an component then you have got an structure like this:

您一直在关注:

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

To import some other component or script you will need to use import inside the script tags

<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标记内使用它:

After this you can use ur component / script inside your page/component what else. After you have registered your imported component you can use it inside your HTML markup:

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

这篇关于将脚本/模块/组件导入Nuxt页面的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！