Где разместить VueJS компонентов, общих для всего приложения - PullRequest
Новая
       24

Где разместить VueJS компонентов, общих для всего приложения

0 голосов
/ 21 января 2020

В моем приложении nuxtjs у меня есть несколько функций, которые используются в приложении: Диалог входа / регистрации , закусочная для отображения предупреждений и c. Поскольку я хочу, чтобы эти функции были на каждой странице, а компонент v-app-bar уже добавлен на все страницы. Я включил компоненты для этих функций в v-app-bar компонент. 

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

    <!-- Code for App bar -->

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

Но я не доволен этим подходом по следующим причинам

  1. Я знаю, что эти общие компоненты не принадлежат компоненту v-app-bar. И только ради DRY и головной боли от обслуживания я включил их. Так что с точки зрения дизайна это не очень интуитивно понятно.
  2. Во-вторых, что если в будущем у меня появятся страницы, в которых нет компонента v-app-bar. В этом случае я буду повторять код для этих общих компонентов в любом случае. Таким образом, боль от поддержки кода в нескольких местах все еще будет.

Учитывая вышеизложенные моменты, я ищу более элегантный подход, чем тот, который я реализовал. Если есть рекомендация vuejs, даже лучше. Какие у вас есть предложения по структурированию компонентов для этих общих функций?

Ответы [ 2 ]

1 голос
/ 21 января 2020

Вы можете получить то, что ищете, используя макеты. Что вам нужно сделать, это сделать папку layouts внутри каталога src. А затем вы можете создать столько компонентов макета (*. vue файлов) и использовать их по своему усмотрению.

Например, это по умолчанию. vue компонент внутри layouts папка: 

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

Индекс. Файл vue должен выглядеть примерно так: 

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

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

Я также создал пример проекта в nuxt с макетами ,

Для рабочего прототипа проекта: Посетите эту ссылку .

Надеюсь, это поможет решить вашу проблему.

0 голосов
/ 21 января 2020

Вы можете использовать глобальный трюк регистрации компонентов Криса Фрица . Вам просто нужно немного изменить его, чтобы он больше подходил для приложения nuxt. js. Таким образом, вы можете создать папку base в папке components и хранить там все эти общие компоненты. Затем создайте новый плагин, измените путь к папке @/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'
],
...