Vue.js 3 с его Composition API открыл новые горизонты для фронтенд-разработчиков. Он стал мощнее, быстрее и гибче. Но чтобы использовать эти возможности, нужно грамотно настроить окружение для разработки. Сегодня мы создадим проект с Vue 3, используя такие современные инструменты, как Vite, TypeScript, SCSS, и Pinia.

Почему именно Vite, TypeScript, SCSS и Pinia?

• Vite — это супербыстрая среда для сборки, которая обеспечивает мгновенную перезагрузку и модульную замену на лету. Забыли про долгие ожидания, пока пересоберется проект.
• TypeScript — помогает писать чистый код с типизацией. Меньше ошибок на этапе разработки, больше контроля и предсказуемости.
• SCSS — расширяет возможности стандартного CSS, добавляя переменные, вложенность, миксины и другие полезные штуки.
• Pinia — легковесная библиотека для управления состоянием, которая пришла на замену Vuex и стала идеальной парой к Vue 3.

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

Итак, начнем с создания проекта. Установим шаблон для Vue.js с поддержкой TypeScript через Vite. Это займет буквально пару минут.

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

Эта команда сделает следующее:

• Создаст папку demo-crm с базовой конфигурацией для Vue.js и TypeScript.
• Подключит все необходимые зависимости для быстрого старта.

Когда все завершится, переходим в каталог проекта:

cd demo-crm

Уже видим знакомую структуру: папка src, конфигурационные файлы для Vite и TypeScript, ну и, конечно, готовый к работе шаблон на Vue 3.

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

Прежде чем запустить проект, установим все необходимые зависимости. Выполняем:

npm install

Эта команда скачает все пакеты, указанные в package.json. Процесс установки может занять несколько минут, так что можно на этом этапе налить себе кофе ☕.

Настройка SCSS

Теперь пришло время поработать со стилями. SCSS — это стиль CSS на стероидах, позволяющий писать код намного удобнее и чище. Чтобы добавить поддержку SCSS в наш проект, выполним следующую команду:

npm install -D sass

С этим пакетом Vite автоматически обработает любые .scss файлы без дополнительных настроек.

Для теста, давайте создадим простой файл стилей. В папке src/assets создайте файл styles.scss и добавьте в него что-нибудь простое:

$main-color: #42b983;

body {
  background-color: $main-color;
  font-family: 'Arial', sans-serif;
}

Теперь подключим этот файл в src/main.ts:

import './assets/styles.scss';

Запустите проект, и вы увидите, как фон страницы окрасился в фирменный цвет Vue.js. Всё работает, как часы.

Установка Pinia для управления состоянием

С состоянием всегда возникают сложности, особенно когда приложение разрастается. Именно тут на помощь приходит Pinia — библиотека для управления состоянием, которая легко интегрируется с Vue 3 и Composition API.

Устанавливаем Pinia командой:

npm install pinia

Теперь нужно подключить Pinia к проекту. Открываем src/main.ts и добавляем следующий код:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

Создадим пример хранилища. В папке src создаем новую папку stores, а в ней файл useUserStore.ts:

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    isAuthenticated: false,
  }),
  actions: {
    login() {
      this.isAuthenticated = true;
    },
    logout() {
      this.isAuthenticated = false;
    }
  }
});

Теперь мы можем использовать это хранилище в любом компоненте. Например, в App.vue:

<template>
  <div>
    <p v-if="isAuthenticated">Hello, {{ name }}! You are logged in.</p>
    <button @click="login">Login</button>
    <button @click="logout">Logout</button>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from './stores/useUserStore';

const store = useUserStore();
const { name, isAuthenticated, login, logout } = store;
</script>

Теперь у нас есть простая система авторизации! Мы можем входить и выходить из системы, а Pinia управляет состоянием приложения.

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

Ну что, пора запускать проект. Vite делает это максимально просто. В терминале выполним:

npm run dev

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

Когда проект будет готов к продакшн-сборке, выполняем:

npm run build

Vite создаст оптимизированную версию вашего приложения в папке dist, готовую к развертыванию на сервере.

Итоги

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

• Vite дарит мгновенную сборку и быструю перезагрузку.
• TypeScript делает код более предсказуемым и защищенным.
• SCSS позволяет создавать сложные и гибкие стили.
• Pinia упрощает управление состоянием и делает его интуитивным.

Теперь, когда у вас есть всё необходимое, можно приступить к изучению первых основ Vue 3 приложения с полной уверенностью в своих силах!