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

【问题标题】：Correct way to import a script / module / component into a page in Nuxt?将脚本/模块/组件导入 Nuxt 页面的正确方法？
【发布时间】：2020-07-29 16:12:02
【问题描述】：

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

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

非常感谢！

【问题讨论】：

标签： javascript vue.js import export nuxt.js

【解决方案1】：

这很简单。如果你创建一个页面或一个组件，那么你就会得到这样的结构：

你总是跟随：

模板
脚本
风格

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

【讨论】：

谢谢。只是几个问题。 (1) 在第一个示例中，page_name 是否已全局导出，因此任何其他页面也可以运行 {{ page_name }}？ (2) 在第二个示例中， someScript 只是一个要使用整个 script.js 实例化的变量，还是只是该脚本中的一个函数？最后，（3），script.js 是否也必须将自身作为组件导出才能导入？
1. page_name 是仅在此页面/组件上可用的属性/变量，它不是全局的。 2.这取决于您在 script.js 中导出的内容，例如，如果您导出像 export default function() {} 这样的函数，那么 someScript 将是像 3 这样的函数。您需要导出脚本以便可以将其导入其他地方 @987654330 @ 是脚本 .vue 是组件。这里有几种方法如何导出.js文件developer.mozilla.org/de/docs/Web/JavaScript/Reference/…
style 是全局的，如果您希望您的样式仅适用于该页面/组件，那么您需要像这样的scoped 属性。 <style scoped>
从我尝试的 mozilla 链接 export { myFunction };在 index.js 中但出现此错误：“在 '-!./node_modules/babel-loader/lib/index.js??ref--2-0! ./index.js?vue&type=script&lang=js&' 这是 Nuxt 特有的东西，意味着它必须始终是导出默认值吗？
如果要导出单个函数，请使用export default function(){}

【解决方案2】：

我爱上了 vue 的文档，官方页面很棒。

您可以在Vue Style guide 中找到您问题的所有官方答案。它有很多关于做什么好或坏的例子：

【讨论】：