Структуры во Vue

Всем здрасте, привет в продолжении мини-обзорчика фреймворка Vue. Начиная с этой стать, я буду создавать блог на третей версии Vue, потом, по-плану, внедрим часть екосистемы фреймворка в проектик… В общем, сделаем полноценное приложение и, по-пути, разберемся с основными аспектами Vue.

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

Первое, что нужно – это установить node js, затем – непосредственно стартовую сборку вью. Перейдем в директорию, где хотим писать проект, и с нее запустим

npm init vue@latest

Лично я этим путем ни разу не шел… я всегда использовал IDE, в ней ввесь проект собирается без командной строки. Моя среда разработки почему-то(еще не вьехал почему) собирает проект на Vue2, но мы договорились о 3-ей версии. Потому в pacage.json сменил версию и запустил

npm i

после обновления фреймворка, запустим сервер для разработки

npm run serve

после запуска сервера в консоль выведутся ссылки для открытия проекта в браузере. Кликаем и, при отсутствии ошибок, нас встретит приветственная страница(главное изображение этой записи).

Если у вас тоже были проблемы с 2 и 3 версиями, скорее всего вы увидите пустой экран и ошибки в консоле браузера. Перейдите в файл src/main.js и разместите там этот код

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

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

Он импортирует нужную функцию с вью 3 и монтирует приложение на нужный элемент.

Короче, после всех действий я получил вот-такую структуру проекта

но вся писанина, которую мы будем делать, будет в папке src.

Структура компонента

Как и все(известные мне доселе) js-фронтенд-фреймворки, данный экземпляр состоит из компонентов. Откроем src/App.vue(первый компонент) и увидим следующее

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

В нем, как видно, есть 3 секции. Секция template обычная html-разметка, может содержать теги других компонентов и особые vue-атрибуты; единственное правило – все содержимое этого тега должно иметь один родительский узел(те обёрнуто общим div-ом, к примеру). Секция script – обычный js-обьект(о нем ниже), а также, импорты нужных компонентов и библиотек. Секция style, как понятно, это стили.

Структура javascript объекта

Этот объект содержит имя компонента, функции(т.н. хуки жизненного цикла приложения), вложенные объекты. Вот полный список

Здесь:

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  props:{
    property:Number
  },
  methods:{},
  computed:{},
  watch:{},
  data:function () {
    return {}
  },
  setup() {
  },
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeUnmount() {
  },
  unmounted() {
  }
}

1. components это другие компоненты вью, использующиеся в этом;
2. props – свойства с типом их данных, которые будут получены из вне(источник – родительский компонент);
3. methods – функции, которыми будет управляться компонент;
4. computed – обьект, содержащий вычисляемые значения;
5. watch – отслеживание изменений в значениях;
6. data – функция, возвращающая объект со свойствами;
7. setup – начиная с этой функции и ниже это хуки жизненного цикла приложения, те будут вызваны при определенных событиях в приложении(не спровоцированных пользователем напрямую); конкретно это срабатывает при инициализации компонента(в котором находится); в отличии от остальных мест, здесь нет доступа к this и все, что здесь создастся не будет реактивным;
8. beforeCreate – ровно то же, что и в 7; для чего надо – фиг знает;
9. created – это уже после разрешения всех данных, тут доступен this и реактивность;
10. beforeMount – срабатывает перед началом рендеринга компонента;
11. mounted – когда компонент целиком отрендерился;
12. beforeUpdate – срабатывает перед каждым перерисовыванием любого элемента компонента;
13. updated – после этого действия(в пункте 12);
14. beforeUnmount – перед тем, как компонент будет удален из DOM-дерева страницы;
15. unmounted – после удаления.

Резюмируя

Во-первых, разрабатывать с этим фреймворком легко(как по – легче чем с прочим, знакомыми мне), почти все готово со старта(собственно, для того и делаются фреймворки). Достаточно богатая экосистема, на все случаи жизни(еще не было случаю когда он говорил “нет”, если язык позволяет, конечно…). И еще, малость не забыл сказать, это далеко не все плюшки, которые тут есть – с ними мы познакомимся в процессе написания приложения.