3

我有一个 Nuxt 项目，我需要制作自定义函数和 Vue mixins，以便在 Vue 组件和页面中重用。

我应该将包含这些文件的文件放在哪个文件夹中？我应该在 Nuxt 项目的顶层创建一个“lib”文件夹并将文件放在那里吗？

如果有帮助，请提供更多详细信息：

  • 这些函数只会在需要时导入（不是全局的）
  • 这些功能将被测试

Nuxt 目录结构文档

4

3 回答 3

5

在我的 nuxt 项目中，我通常在项目的根目录级别添加四个文件夹，这些文件夹mixins用于我的所有 mixin，models用于我在整个应用程序中使用的模型或类，services其中包含我所有的 API 端点和我的utils所有实用程序函数和其他通用函数，例如我的输入验证函数和我的目录，如下所示：

在此处输入图像描述

在这种情况下，mixins您可以将所需的 mixin 导入所需的组件并像往常一样使用它们：

import someMixin from '@/mixins/someMixin'
...
export default {
  mixins: [someMixin],
  ...
}
于 2021-09-17T14:15:11.507 回答
1

由于 Nuxt 没有任何特定的 mixins 目录，您可以像创建项目中的任何其他插件一样创建它们。我更喜欢将我过度使用的插件放在一个名为common. 这真的是你的选择。但是由于您想在整个项目中重用它们，那么您可能需要使用类似的全局 mixin，但是如果处理不当，它们会导致内存泄漏。所以我们需要某种标志来防止它多次注册。

因此，创建一个您喜欢的目录（例如myMixinFolder）。例如，我将创建一个 mixin 文件。我在里面创建了一个文件myMixinFolder并命名它my-mixin-plugin.js。

import Vue from "vue"

if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ 
    methods: {
      sayIt(name) {
        console.log(`Hello dear ${name}`)
      }
    }
  })
}

然后将其添加到nuxt.config.js文件中：

plugins: [
    { src: '~/plugins/my-mixin-plugin.js' },
],

现在您可以在任何组件中使用它，如下所示：

<template>
  <span>{{ sayIt('Batman') }}</span>
</template>

或在里面script：

this.sayIt('Batman')

这样你就不需要一次又一次地导入mixin（虽然，如果你有多个mixin文件，你需要小心以防止内存泄漏）。

于 2021-09-17T15:24:32.080 回答
1

您可以将 mixins 文件放入 2 个文件夹中。

  1. 您可以在 plugins 文件夹中创建 global-mixin.js，然后将此文件设置为plugins: []nuxt.config 的一部分。关联
  2. 您可以创建一个 mixins 文件夹并在其中创建 mixin.js。关联

但是nuxt.js的文档提示第一个解决方案是正确的

于 2021-09-17T14:16:06.257 回答