В этом руководстве мы настраиваем окружение для проекта на Vue.js с использованием TypeScript, SCSS, Vite и Pinia. Объясним назначение каждого инструмента и пакета, а также шаги по их установке.

Создание проекта с Vite

Эта команда создаст новую директорию demo-crm с начальной конфигурацией для Vue.js и TypeScript.

npm init vite@latest demo-crm --template vue-ts

Назначение:

• Vite: Современный инструмент для сборки фронтенд-приложений. Обеспечивает быструю сборку и горячую замену модулей во время разработки.
• vue-ts: Шаблон Vite для создания проекта с Vue.js и TypeScript. Этот шаблон автоматически настраивает базовую конфигурацию для работы с Vue и TypeScript.

Перейдите в директорию вашего нового проекта, чтобы начать работу с ним.

cd demo-crm

Установка зависимостей

Устанавливает все зависимости, указанные в package.json. Эти зависимости необходимы для запуска и разработки проекта.

npm install --save-dev

Установка SCSS

Эти пакеты позволяют использовать SCSS для стилизации вашего проекта.

npm install -D sass-loader sass

Назначение:

• sass-loader: Лоадер для Webpack, который позволяет использовать SCSS в проекте. (Хотя Vite использует собственные механизмы для обработки стилей, sass-loader здесь упоминается для полноты картины.)
• sass: Пакет для компиляции SCSS в CSS.

Установка Pinia

Библиотека Pinia для управления состоянием приложения, современная альтернатива Vuex. Предназначена для хранения и управления глобальным состоянием вашего приложения Vue.js.

npm install pinia

Запуск и сборка проекта

Создает оптимизированную версию вашего проекта для продакшена. Все исходные файлы компилируются и минифицируются для развертывания на сервере.

npm run build

Далее запустим сервер разработки, который обеспечивает горячую замену модулей и быструю перезагрузку при изменениях. Проект будет доступен по адресу http://localhost:3000, и вы сможете видеть изменения в реальном времени.

npm run dev

Итоги

• Vite упрощает разработку и сборку фронтенд-приложений.
• Vue.js предоставляет современный фреймворк для создания интерактивных пользовательских интерфейсов.
• TypeScript добавляет типизацию, что улучшает качество кода.
• SCSS позволяет использовать расширенные возможности CSS для стилизации.
• Pinia управляет состоянием приложения, обеспечивая простоту и гибкость.

Теперь ваше окружение настроено, и вы готовы начать разработку вашего проекта с Vue.js.