VUE 3
Архитектура
Что такое Pinia
Pinia — что это? Pinia — это хранилище состояния (state manager) для Vue.Проще: Pinia = глоба...
Что такое Nuxt
Nuxt — это фреймворк поверх Vue, который упрощает разработку приложений и сайтов. Если коротко: ...
Где находится vue-router
vue-router не лежит в твоём проекте напрямую — это npm-пакет, который устанавливается как зависим...
Что такое ConfigProvider
Это корневой шаблон приложения, где оборачивается весь UI и подключаются глобальные настройки. Ра...
Что означает app.mount('#app');
app.mount('#app') — это момент, когда Vue реально запускается и начинает рисовать интерфейс. Ч...
hash vs history
1️⃣ Hash mode (#/path) Пример URL: http://site.com/#/modules Как работает Всё, что посл...
Где будет #/modules
#/modules не имеет отношения к папке ./modules в файловой системе.Это URL-путь, а не путь к файла...
Где находится ./modules/
Тут важно понять относительный путь 👍 import.meta.glob('./modules/**/*.ts') Где именно находи...
Что здесь происходит: const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', { eager: true, });
Разберём построчно const dynamicRouteFiles = import.meta.glob( './modules/**/*.ts', { eag...
Что выполняется первым main.ts или app.vue
Коротко:👉 первым выполняется main.ts, а уже потом — App.vue. Порядок выполнения во Vue 1️⃣ ma...
Где в VUE прописаны роуты?
В Vue роуты прописываются не в самом компоненте, а в Vue Router — обычно в отдельном файле. Где ...
что делает конструкция: router.beforeEach((to) => { ... });
router.beforeEach((to) => { ... }) — это глобальный навигационный гард (guard) во Vue Router. Пр...
Что означает конструкция: const loadedPaths = new Set<string>();
Эта конструкция означает:👉 создаётся пустое множество (Set) строк, которое будет хранить уникальн...
Что делает эта строка: const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
Это ключевая строка для динамических страниц 👇 const pageMap: ComponentRecordType = import.me...
Что такое Vite?
Vite — это инструмент для разработки и сборки фронтенд-приложений (build tool), чаще всего для Vu...
Что делает эта строка: return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
Эта строка делает HTTP-запрос к серверу и возвращает результат.Разберём точно и по слоям 👇 retur...
Что означает конструкция: badgeVariants?: | 'default' | 'destructive' | 'primary' | 'success' | 'warning' | string;
Это TypeScript-конструкция, которая описывает тип свойства.По шагам 👇 Что это означает в целом...
Что такое Promise?
Promise — это объект в JavaScript, который представляет результат асинхронной операции(то есть то...
Что означает: type RouteRecordStringComponent<T = string> = Omit< RouteRecordRaw, 'children' | 'component' > & { children?: RouteRecordStringComponent<T>[]; component: T; };
Это TypeScript-тип, который переопределяет тип маршрута Vue Router, заменяя поле component на стр...
Что означает: interface GenerateMenuAndRoutesOptions { fetchMenuListAsync?: () => ...
interface GenerateMenuAndRoutesOptions { fetchMenuListAsync?: () => Promise<RouteRecordStringC...
Что означает: options.routes = cloneDeep(options.routes);
Эта строка означает:👉 создаётся глубокая копия массива маршрутов, и она записывается обратно в op...