Что делаешь верхнеуровневое после Vue create при создании приложения?

После выполнения vue create my-app и успешного создания проекта, я выполняю следующий верхнеуровневый набор действий, чтобы подготовить приложение к разработке, обеспечить качество кода, масштабируемость и соответствие современным стандартам.

1. Анализ сгенерированной структуры и установка зависимостей

Первым делом я открываю проект в редакторе кода (обычно VS Code) и изучаю сгенерированную структуру, чтобы убедиться, что выбранные опции (Vuex, Router, TypeScript, линтер и т.д.) правильно применены.

# Перехожу в директорию проекта
cd my-app

# Устанавливаю зависимости (если не были установлены автоматически)
npm install

2. Настройка инструментов качества кода и форматирования

Я считаю это критически важным шагом для поддержания консистентности кода, особенно в команде.

• Настройка ESLint и Prettier: Редактирую .eslintrc.js и .prettierrc (если они есть), чтобы привести правила в соответствие с принятыми в команде стандартами. Часто добавляю правила для Vue 3 Composition API, если проект использует его.
• Добавление линт-стадии в Git: Настраиваю husky и lint-staged, чтобы автоматически проверять и форматировать код перед каждым коммитом. Это предотвращает попадание ошибок стиля в репозиторий.

// package.json (пример добавления скриптов и lint-staged)
{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write src/"
  },
  "lint-staged": {
    "*.{js,vue}": ["eslint --fix", "prettier --write"]
  }
}

3. Конфигурация проекта и среды

• Файл окружения: Создаю .env и .env.development файлы для управления переменными окружения (API_URL, ключи и т.д.). Важно добавить их в .gitignore.
• Настройка Vite / Webpack: Если нужны специфические алиасы для путей или настройки сборки, вношу изменения в vue.config.js (для Vue CLI) или vite.config.js (для Vite). Часто добавляю алиас @ для удобного импорта из src.

// vite.config.js (пример для Vite)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

• Настройка TypeScript: Если проект использует TypeScript, проверяю и настраиваю tsconfig.json, особенно пути (paths) и строгость проверок (strict: true).

4. Архитектурные решения и структура каталогов

Я стремлюсь к предсказуемой и масштабируемой структуре с первого дня.

• Реорганизация src/: Часто дополняю стандартную структуру, создавая директории для:

    *   `components/` -> `ui/` для переиспользуемых компонентов интерфейса и `components/` для специфичных для фич.
    *   `composables/` или `hooks/` для логики Composition API.
    *   `stores/` (для Pinia, если не выбран Vuex) с модульной структурой.
    *   `utils/` или `helpers/` для утилитарных функций.
    *   `api/` или `services/` для инкапсуляции всех HTTP-запросов (часто с использованием **axios** или **fetch**).
    *   `types/` или `interfaces/` для TypeScript-определений.

• Настройка маршрутизатора (Vue Router): Организую маршруты, возможно, разбивая router/index.js на модули. Настраиваю глобальные перехватчики (navigation guards) для аутентификации и контроля доступа.
• Настройка состояния (Pinia / Vuex): Создаю базовую структуру хранилища. Для Pinia это обычно несколько stores (например, useAuthStore, useUserStore).

5. Интеграция базовых зависимостей и утилит

Устанавливаю и настраиваю библиотеки, которые почти всегда требуются в современных проектах:

# HTTP-клиент
npm install axios

# Управление состоянием (если не выбран ранее)
npm install pinia

# Утилиты для работы с датами, формами, валидацией и т.д.
npm install dayjs vee-validate yup

• Настройка axios: Создаю экземпляр с базовым URL, интерцепторами для автоматической подстановки токенов авторизации и обработки ошибок.

6. Настройка системы стилей

Определяю подход к стилям: SCSS/SASS, CSS-модули или утилитарный CSS (например, Tailwind). Создаю глобальные файлы стилей (src/assets/scss/main.scss) для переменных, миксинов и сброса стандартных стилей.

7. Инициализация системы контроля версий (Git)

Если vue create не инициализировал Git (а так часто и бывает), я делаю это вручную.

git init
git add .
git commit -m "Initial commit: project scaffolded with Vue CLI"

Создаю .gitignore файл (если его нет), убедившись, что в него добавлены node_modules, .env, директории сборки (dist) и логи.

8. Проверка работоспособности и первый запуск

Запускаю dev-сервер, чтобы убедиться, что всё работает, и выполняю базовую "уборку".

npm run serve # или npm run dev для Vite

• Очистка дефолтного кода: Удаляю ненужный дефолтный код (компонент HelloWorld, лишние стили в App.vue).
• Создание базового Layout: Часто создаю корневой компонент с базовой разметкой (шапка, навигация, основная область, подвал).

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