Что такое ConfigProvider

Это корневой шаблон приложения, где оборачивается весь UI и подключаются глобальные настройки. Разберём по слоям, сверху вниз 👇

Общая идея

<ConfigProvider>
  <App>
    <RouterView />
  </App>
</ConfigProvider>

👉 Всё приложение:

• получает настройки Ant Design

• живёт внутри layout-компонента

• меняется в зависимости от маршрута

1️⃣ <ConfigProvider> — глобальная конфигурация Ant Design

<ConfigProvider :locale="antdLocale" :theme="tokenTheme">

Это компонент из Ant Design Vue.

Что он делает:

• 🌍 задаёт локаль (язык, формат дат, текст)

• 🎨 задаёт тему (цвета, токены)

• ⚙️ пробрасывает настройки во все AntD компоненты ниже

Пример:

antdLocale = ruRU
tokenTheme = {
  token: { colorPrimary: '#1677ff' }
}

Без него:

• кнопки, модалки, date-picker — были бы с дефолтными настройками

2️⃣ <App> — layout / оболочка приложения

⚠️ Это не App.vue, а компонент Ant Design Vue:

import { App } from 'ant-design-vue'

Он:

• управляет message / notification / modal

• создаёт правильный контекст для AntD

• нужен для новых API (App.useApp())

Пример использования:

const { message } = App.useApp()
message.success('Успешно')

📌 По сути — служебный контейнер Ant Design.

3️⃣ <RouterView /> — место для страниц

<RouterView />

Это компонент Vue Router.

Он:

• рендерит компонент текущего маршрута

• меняется при переходе по роутам

Пример:

• /login → Login.vue

• /users → Users.vue

Как это работает вместе

Пусть пользователь открывает:

/users

Тогда Vue:

1. Загружает App.vue

2. Применяет Ant Design настройки

3. Находит маршрут /users

4. Вставляет Users.vue внутрь <RouterView />

5. Весь UI:

   • с нужной темой

   • на нужном языке

   • в общем layout

Визуально

ConfigProvider (locale, theme)
 └─ App (Ant Design context)
     └─ RouterView
         └─ Users.vue

Коротко

Частая ошибка ❌

Путать:

• App.vue (корневой компонент Vue)

• <App> из ant-design-vue