在哪里放置应用程序中通用的 VueJS 组件

Posted 2023-02-23

【中文标题】在哪里放置应用程序中通用的 VueJS 组件

【英文标题】：Where to put VueJS components common across the application

【发布时间】：2020-05-07 08:03:05

【问题描述】：

在我的nuxtjs 应用程序中，我几乎没有在整个应用程序中使用的功能，即登录/注册对话框、用于显示警报的snackbar 等。因为，我希望每个页面都有这些功能，并且v-app-bar 组件已添加到所有页面。我已将这些功能的组件包含在 v-app-bar 组件中。

<template>
  <v-app-bar app id="app-bar">
    <LoginJoinDialog />
    <AlertSnackbar />

    <!-- Code for App bar -->

  </v-app-bar>
</template>

但我对这种方法不满意，原因如下

我知道这些常用组件不属于v-app-bar 组件。只是为了干燥和维护头痛，我将它们包括在内。所以从设计的角度来看，这不是很直观。 其次，如果将来我的页面没有v-app-bar 组件怎么办。在这种情况下，无论如何我都会为这些通用组件重复代码。因此，在多个地方维护代码的痛苦仍然存在。

考虑到以上几点，我正在寻找一种比我已经实现的更优雅的方法。如果对此有vuejs 推荐，那就更好了。对于这些常见功能的组件结构，您有什么建议？

【参考方案1】：

您可以使用布局来实现您正在寻找的东西。您需要做的是在src 目录中创建layouts 文件夹。然后你可以创建尽可能多的 布局组件（*.vue 文件）并根据需要使用它们。

例如，这是layouts文件夹内的default.vue组件：

<template>
  <main>
    <!-- Your app bar component -->
    <v-app-bar app id="app-bar">
      <LoginJoinDialog />
      <AlertSnackbar />
      <!-- Code for App bar -->
    </v-app-bar>

    <!-- Page Content (This tag will automatically embed the page content into layouts)-->
    <nuxt />

  </main>
</template>

<script>
export default ;
</script>

现在，在您的 pages 文件夹中，您可以添加 index.vue 文件，您可以在其中引用默认布局，以这种方式作为属性：layout: 'default'

index.vue 文件应该如下所示：

<template>
  <!-- page content goes here -->
</template>

<script>
export default 
  name: 'HomePage',
  layout: 'default',
;
</script>

我还创建了一个带有布局的example project in nuxt。

对于项目的工作原型：Visit this link。

我希望它有助于解决您的问题。

【参考方案2】：

您可以使用global component registration trick by Chris Fritz。您只需要对其进行一些修改，使其更适合 nuxt.js 应用程序。因此，您可以在components 文件夹下创建一个base 文件夹，并将所有这些共享组件保存在那里。然后创建一个新插件并将路径更改为您的 @/components/base 文件夹并修改正则表达式，使其抓取所有文件，无论名称是什么：

globalComponents.js

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

export default () => 
  const requireComponent = require.context(
    '@/components/base', false, /[\w-]+\.vue$/
  )

  requireComponent.keys().forEach(fileName => 
    const componentConfig = requireComponent(fileName)

    const componentName = upperFirst(
      camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
    )

    Vue.component(componentName, componentConfig.default || componentConfig)
  )

nuxt.config.js

plugins: [
  '~/plugins/globalComponents.js'
],