Создание Vue-приложения

Vue.js — прогрессивный JavaScript-фреймворк, ориентированный на построение пользовательских интерфейсов. Центральная идея Vue заключается в реактивности данных и декларативном подходе к построению интерфейса. Реактивность означает автоматическое обновление DOM при изменении состояния приложения.

Инициализация проекта

Для создания нового Vue-приложения чаще всего используют инструмент Vue CLI или современный Vite. Vite обеспечивает более быструю сборку и горячую перезагрузку модулей.

Пример создания проекта с помощью Vite:

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Структура проекта включает:

  • src/main.js — точка входа приложения, где создаётся экземпляр Vue.
  • src/App.vue — корневой компонент.
  • src/components/ — каталог для всех дочерних компонентов.

Создание корневого экземпляра Vue

В main.js создается приложение Vue и монтируется на DOM:

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

createApp(App).mount('#app');

Ключевые моменты:

  • createApp создаёт новый экземпляр приложения.
  • mount(‘#app’) связывает Vue с элементом DOM.

Компоненты

Компоненты в Vue — это переиспользуемые блоки интерфейса. Они могут быть как глобальными, так и локальными. Структура однофайлового компонента (.vue) включает три секции:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Нажми меня</button>
    <p>Счётчик: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Пример Vue-компонента',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>
  • template — декларативное описание DOM.
  • script — логика компонента, реактивные данные через data().
  • methods — методы для обработки событий.
  • style scoped — локальные стили, применяемые только к этому компоненту.

Реактивность и связывание данных

Vue использует реактивную систему на основе Proxy. Данные, определённые в data(), автоматически отслеживаются. Привязка к DOM осуществляется через:

  • Интерполяцию: {{ count }}
  • Директивы: v-bind, v-model, v-if, v-for
  • События: v-on:click или сокращённо @click

Пример использования директив:

<input v-model="title" placeholder="Введите текст" />
<p v-if="title">Вы ввели: {{ title }}</p>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
  • v-model обеспечивает двустороннюю привязку.
  • v-if / v-else условно рендерят элементы.
  • v-for используется для циклов с обязательным :key.

Работа с компонентами

Компоненты можно подключать локально или глобально.

Локальная регистрация:

import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};

Глобальная регистрация:

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

Передача данных между компонентами

Для связи родителя и дочернего компонента используются props и events.

Props — передача данных в дочерний компонент:

<ChildComponent :message="parentMessage" />

В дочернем компоненте:

export default {
  props: ['message']
};

События — отправка данных от дочернего компонента родителю:

<button @click="$emit('notify', 'Привет родителю')">Отправить</button>

В родителе:

<ChildComponent @notify="handleNotify" />

Vue Router

Для многостраничных приложений используется Vue Router. Он обеспечивает маршрутизацию и поддержку динамических страниц.

Установка:

npm install vue-router

Пример конфигурации маршрутов:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

В main.js:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Vuex / Pinia

Для управления глобальным состоянием применяется Pinia (современная альтернатива Vuex).

Установка Pinia:

npm install pinia

Создание стора:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

Использование в компоненте:

import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  }
};

Комбинирование Composition API и Options API

Vue поддерживает два подхода к разработке компонентов:

  • Options API — традиционный способ с data, methods, computed.
  • Composition API — современный подход с setup() и реактивными объектами ref и reactive.

Пример Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};

Итоговая структура Vue-приложения

Vue-приложение состоит из:

  1. Точки входа (main.js) — создание и монтирование приложения.
  2. Корневого компонента (App.vue) — оболочка всех компонентов.
  3. Дочерних компонентов (components/) — переиспользуемые блоки UI.
  4. Маршрутов (router/) — управление навигацией.
  5. Состояния (store/) — централизованное управление данными.
  6. Стили и ресурсы (assets/) — CSS, изображения, шрифты.

Правильная организация кода и использование реактивной системы Vue позволяет создавать масштабируемые и производительные интерфейсы, легко поддерживаемые и расширяемые.

Оглавление