# Что такое ConfigProvider
Это **корневой шаблон приложения**, где оборачивается весь UI и подключаются глобальные настройки. Разберём **по слоям, сверху вниз** 👇
---
## Общая идея
```vue
```
👉 Всё приложение:
- получает **настройки Ant Design**
- живёт **внутри layout-компонента**
- меняется в зависимости от маршрута
---
## 1️⃣ `` — глобальная конфигурация Ant Design
```vue
```
Это компонент из **Ant Design Vue**.
Что он делает:
- 🌍 задаёт **локаль** (язык, формат дат, текст)
- 🎨 задаёт **тему** (цвета, токены)
- ⚙️ пробрасывает настройки **во все AntD компоненты ниже**
Пример:
```ts
antdLocale = ruRU
tokenTheme = {
token: { colorPrimary: '#1677ff' }
}
```
Без него:
- кнопки, модалки, date-picker — были бы с дефолтными настройками
---
## 2️⃣ `` — layout / оболочка приложения
⚠️ **Это не `App.vue`**, а компонент Ant Design Vue:
```vue
import { App } from 'ant-design-vue'
```
Он:
- управляет **message / notification / modal**
- создаёт правильный контекст для AntD
- нужен для новых API (`App.useApp()`)
Пример использования:
```ts
const { message } = App.useApp()
message.success('Успешно')
```
📌 По сути — **служебный контейнер Ant Design**.
---
## 3️⃣ `` — место для страниц
```vue
```
Это компонент **Vue Router**.
Он:
- рендерит компонент **текущего маршрута**
- меняется при переходе по роутам
Пример:
- `/login` → `Login.vue`
- `/users` → `Users.vue`
---
## Как это работает вместе
Пусть пользователь открывает:
```
/users
```
Тогда Vue:
1. Загружает `App.vue`
2. Применяет Ant Design настройки
3. Находит маршрут `/users`
4. Вставляет `Users.vue` **внутрь ``**
5. Весь UI:
- с нужной темой
- на нужном языке
- в общем layout
---
## Визуально
```text
ConfigProvider (locale, theme)
└─ App (Ant Design context)
└─ RouterView
└─ Users.vue
```
---
## Коротко