Vue 3 for Beginners / Developing an Internet Store for Vue Sneakers

Vue 3 – это популярный JavaScript-фреймворк для создания пользовательских интерфейсов. Он обладает простым и интуитивно понятным API, что делает его идеальным выбором для начинающих разработчиков. В этом уроке мы рассмотрим основы Vue 3 и создадим простой интернет-магазин Vue Sneakers.

Шаг 1: Установка Vue CLI
Первым шагом будет установка Vue CLI – официального инструмента для быстрого старта проектов на Vue. Для этого откройте терминал и выполните следующие команды:

npm install -g @vue/cli
vue create vue-sneakers
cd vue-sneakers

Эти команды установят Vue CLI и создадут новый проект с названием "vue-sneakers".

Шаг 2: Создание компонентов
Vue основан на компонентном подходе, поэтому создадим несколько компонентов для нашего интернет-магазина. Создайте следующие файлы в папке src/components:

• Navbar.vue
• ProductList.vue
• Cart.vue

Шаг 3: Разработка компонентов
Теперь давайте разработаем каждый компонент по отдельности.

Navbar.vue:

<template>
  <div class="navbar">
    <h1>Vue Sneakers</h1>
  </div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

<style>
.navbar {
  background: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}
</style>

ProductList.vue:

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-card">
      <img :src="product.image" :alt="product.name">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
      <button @click="addToCart(product.id)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: ['products'],
  methods: {
    addToCart(id) {
      this.$emit('add-to-cart', id);
    }
  }
}
</script>

<style>
.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}
</style>

Cart.vue:

<template>
  <div class="cart">
    <h2>Cart</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Cart',
  props: ['cart']
}
</script>

<style>
.cart {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

Шаг 4: Интеграция компонентов
Теперь давайте интегрируем эти компоненты в нашем приложении. Откройте файл src/App.vue и добавьте следующий код:

<template>
  <div>
    <Navbar />
    <ProductList :products="products" @add-to-cart="addToCart" />
    <Cart :cart="cart" />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue';
import ProductList from './components/ProductList.vue';
import Cart from './components/Cart.vue';

export default {
  name: 'App',
  components: {
    Navbar,
    ProductList,
    Cart
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Nike Air Max', price: 100, image: 'nike.png' },
        { id: 2, name: 'Adidas Superstar', price: 80, image: 'adidas.png' },
        { id: 3, name: 'Puma Suede', price: 90, image: 'puma.png' }
      ],
      cart: []
    }
  },
  methods: {
    addToCart(id) {
      const product = this.products.find(p => p.id === id);
      this.cart.push(product);
    }
  }
}
</script>

<style>
/* Add your global styles here */
</style>

Шаг 5: Запуск приложения
Теперь наше приложение готово к запуску. Запустите его, выполнив следующую команду в терминале:

npm run serve

Откройте браузер и перейдите по адресу http://localhost:8080. Вы увидите простой интернет-магазин Vue Sneakers с возможностью добавления товаров в корзину.

Это был основной урок по разработке интернет-магазина на Vue 3 для начинающих. Надеюсь, этот урок был полезен для вас! Если у вас есть какие-либо вопросы, не стесняйтесь задавать их в комментариях. Удачи в изучении Vue 3!