Nuxt2: структура большого приложения

Создание структуры большого приложения на Nuxt 2 требует тщательного планирования и организации кода, чтобы обеспечить масштабируемость, поддерживаемость и производительность. Ниже приведен пример структуры проекта, который подходит для крупного приложения:

Базовая структура проекта Nuxt 2

nuxt-app/
├── assets/               # Статические ресурсы (SCSS, изображения, шрифты)
│   ├── scss/             # Глобальные стили SCSS
│   └── images/           # Изображения
├── components/           # Глобальные компоненты Vue
│   ├── common/           # Общие компоненты (кнопки, инпуты и т.д.)
│   ├── layout/           # Компоненты для макетов (хедер, футер)
│   └── ui/               # UI-компоненты (модалки, уведомления)
├── layouts/              # Макеты страниц
│   ├── default.vue       # Основной макет
│   └── auth.vue          # Макет для страниц авторизации
├── middleware/           # Глобальные и локальные middleware
│   ├── auth.js           # Middleware для проверки авторизации
│   └── guest.js          # Middleware для гостевых страниц
├── pages/                # Страницы приложения
│   ├── index.vue         # Главная страница
│   ├── auth/             # Страницы авторизации
│   │   ├── login.vue     # Страница входа
│   │   └── register.vue  # Страница регистрации
│   ├── dashboard/        # Личный кабинет
│   │   ├── index.vue     # Основная страница кабинета
│   │   └── settings.vue  # Настройки
│   └── _slug.vue         # Динамический маршрут
├── plugins/              # Плагины Vue/Nuxt
│   ├── axios.js          # Плагин для работы с axios
│   └── vuetify.js        # Плагин для Vuetify (если используется)
├── static/               # Статические файлы (robots.txt, favicon.ico)
├── store/                # Vuex хранилище
│   ├── index.js          # Основной файл хранилища
│   ├── modules/          # Модули Vuex
│   │   ├── auth.js       # Модуль для авторизации
│   │   └── user.js       # Модуль для работы с пользователем
│   └── actions.js        # Глобальные actions
├── nuxt.config.js        # Конфигурация Nuxt
├── .env                  # Переменные окружения
└── package.json          # Зависимости и скрипты

Описание ключевых директорий и файлов

1. assets/
   Здесь хранятся статические ресурсы, такие как SCSS-файлы, изображения и шрифты. Глобальные стили можно подключать в nuxt.config.js.

2. components/
   Глобальные компоненты, которые используются на нескольких страницах. Рекомендуется разделять компоненты на категории:

   • common/ — общие компоненты (кнопки, инпуты).
   • layout/ — компоненты для макетов (хедер, футер).
   • ui/ — UI-компоненты (модалки, уведомления).

3. layouts/
   Макеты страниц. Например:

   • default.vue — основной макет для большинства страниц.
   • auth.vue — макет для страниц авторизации.

4. middleware/
   Middleware для обработки запросов. Например:

   • auth.js — проверка авторизации пользователя.
   • guest.js — ограничение доступа для авторизованных пользователей.

5. pages/
   Страницы приложения. Nuxt автоматически создает маршруты на основе структуры этой папки. Например:

   • auth/login.vue — страница входа.
   • dashboard/index.vue — личный кабинет.

6. plugins/
   Плагины для расширения функциональности Nuxt или Vue. Например:

   • axios.js — настройка axios.
   • vuetify.js — интеграция Vuetify.

7. static/
   Статические файлы, которые не нужно обрабатывать (например, favicon.ico, robots.txt).

8. store/
   Vuex хранилище для управления состоянием приложения. Рекомендуется использовать модули для разделения логики:

   • modules/auth.js — управление авторизацией.
   • modules/user.js — управление данными пользователя.

9. nuxt.config.js
   Основной конфигурационный файл Nuxt. Здесь настраиваются:

   • Модули (например, @nuxtjs/axios, @nuxtjs/auth).
   • Глобальные стили и скрипты.
   • Переменные окружения.

10. .env
    Файл для хранения переменных окружения (например, API-ключей, URL-адресов).

Рекомендации для больших приложений

1. Используйте модули Vuex
   Разделяйте хранилище на модули для упрощения управления состоянием. Например:

   • auth — авторизация.
   • user — данные пользователя.
   • products — данные о товарах.

2. Оптимизируйте загрузку компонентов
   Используйте динамический импорт для ленивой загрузки компонентов:

   Копировать

   const LazyComponent = () => import('@/components/LazyComponent.vue');

3. Разделяйте стили
   Используйте SCSS или PostCSS для модульности стилей. Подключайте глобальные стили в nuxt.config.js.

4. Используйте middleware для защиты маршрутов
   Например, для проверки авторизации:

   Копировать

   export default function ({ store, redirect }) {
    if (!store.state.auth.loggedIn) {
      return redirect('/auth/login');
    }
   }

5. Настройка API
   Используйте @nuxtjs/axios для работы с API. Настройте базовый URL и интерсепторы в nuxt.config.js.

6. Оптимизация производительности

   • Используйте nuxt/image для оптимизации изображений.
   • Включайте кэширование и сжатие на сервере.

7. Тестирование
   Добавьте модули для тестирования (например, Jest или Cypress) и настройте CI/CD.

Пример nuxt.config.js

export default {
  target: 'server',
  head: {
    title: 'Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
  },
  css: ['@/assets/scss/main.scss'],
  plugins: ['@/plugins/axios.js', '@/plugins/vuetify.js'],
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  axios: {
    baseURL: process.env.API_BASE_URL,
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/auth/user', method: 'get' },
        },
      },
    },
  },
  buildModules: ['@nuxtjs/vuetify'],
  vuetify: {
    customVariables: ['~/assets/scss/variables.scss'],
  },
};

Эта структура и рекомендации помогут вам организовать крупное приложение на Nuxt 2, обеспечивая его масштабируемость и поддерживаемость.