Vue-cli установка и настройка. Работа с эмитами и пропами

В этом видео / статье:

• Настроим и установим vue-cli
• Разберемся, как разбивать логкику и рендер на компоненты
• Узнаем, что такое эмиты, пропы и как их использовать во vue-3

Немного про Node.js

Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:

При установке Node вы также установили npm для управления пакетами npm. npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm, воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

npm также включает инструмент npx, отвечающий за запуск исполняемых пакетов. Это означает, что вы сможете запускать код приложения Create React App без предварительной загрузки проекта.

Скачать ноду можно тут;

Проверить ноду - node -v (в терминале). PS: npm будет установлен вместе с node.js. Проверить его версию можно через npm -v.

Как обновить ноду или npm? Чтобы обновить npm или ноду просто скачайте ноду по новойю

Что такое и зачем нужен vue-cli

Основное предназначение: обработка vue файлов, а именно: минификация и обработка их в js.

Для более понятного примера я покажу скриншот из вебинаров по курсу вью 3:

Есть еще куча плюсов, которые vue-cli дает из под коробки, там и препроцессоры, тайпскрипт, роуты и еще куча всего, что можно использовать или просто проигнорировать.

Самое важное, что я забыл сказать в видео: нету разницы используете ли вы vue-cli или webpack или любой другой обработчик потому что vue компоненты никак от этого не изменятся и перенести проект с vue-cli на webpack и наоборот, это делов на минут пять.

Установка vue-cli 4

Начнем с установки vue-cli 4 версии. Для этого можно установить ее глобально через npm или yarn

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Глобально установленный пакет npm, который предоставляет команду vue в вашем терминале.

Мне же не нравятся глобальные установки тк зачем ставить ее глобально если пользуются ей от силы 1-2 раза в месяц.

Намного лучше использовать npx и установить проект используя команду npx @vue/cli create project-name. Где project-name это название проекта

Npx тоже самое что и npm, нпх упрощает управление + установку + работу с зависимостями, размещенными в реестре, тем самым намного проще использовать CLI-утилиты и другие исполняемые файлы.

Vue 3 Props (options api) что такое и как использовать

Props во vue нужны чтобы предать значение из родителя на ребенке. Кстати, тут я специально дописываю, что это options api тк в следующем видео мы будем делать тоже самое, но уже на composition Api

Сделать это можно так:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

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

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

В текущем приложения пропы главного файла лист будут выглядеть вот так:

<template>
  <ul class="tweets__wrapper">
    <Item v-for="item in items" :key="item.id" :item="item" />
  </ul>
</template>

<script>
import Item from '@/components/Item.vue'

export default {
  components: { Item },
  props: {
    items: {
      type: Array,
      reqired: true
    }
  }
}
</script>

А на главном компоненте, где вызывается List пиропы будут переданы таким образом: <List :items="items" />.

А сам файл Item (впомогательный компонент для листа) можно скачать кликнув [сюда]()

Как использовать эмиты во вью 3 на options api

Эмиты, они же emits, невероятно простой инструмент, который помогает передать значение или определения событий, которые компонент может отправлять своему родительскому элементу.

Используется как-то так:

<template>
    <button v-on:click="$emit('accepted')">OK</button>
</template>

<script>
  export default {
    emits: ['accepted']
  }
</script>

В текущем приложении, чтобы поймать данные с формы (компонент Form.vue), мы напишем это так:

this.$emit('onSubmit', {
  id: Math.round(Math.random() * 30),
  avatar: `https://avatars.dicebear.com/api/male/${Date.now()}.svg`,
   ….
})

А на родителе поймем эмит таким образом:

<template>
  <Form @onSubmit="handleSubmit" />
</template>

<script>
import Form from '@/components/Form'
export default {
  components: { Form },
  methods: {
    handleSubmit(item) {
      this.items.push(item)
    }
  }
}
</script>

На этом все! Буду рад вашему лайку и комментарию на текущем видео!

Дополнительные ссылки:

1. Репозиторий: https://github.com/vedees/tocode-youtube-vtwitter/
2. Скачать код из видео / статьи: https://vk.cc/c2nfAb/