1. Введение и установка Vue.js
2. Создание приложения
3. Синтаксис шаблонов
4. Основы реактивности
5. Вычисляемые свойства
6. Привязка классов и стилей
7. Условное отображение
8. Отображение списков
9. Обработка событий
10. Привязка полей формы
11. TODO

В процессе написания этой статьи возникла идея создать отдельный пост (TODO list) в котором я буду фиксировать вопросы, которые выпадают за рамки данной статьи, но тем не менее на мой взгляд требуют внимания.

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

Создадим файл index.html. В нем нас интересует два момента. Первый это элемент, куда будет монтироваться приложение Vue

<div id=»app»></div>

Второй момент это подключение скрипта js. Обычно делается перед закрывающим тегом </body>

<script type=»module» src=»src/main.js»></script>

Далее создаем сам скрипт main.js. Для примера у меня он размещается в папке src.

 import {createApp} from ‘vue’
 const app = createApp({
   /* здесь мы передаем параметры приложения */
 })

Также мы можем передавать в функцию createApp() корневой компонент, например, App.vue

import {createApp} from ‘vue’
import App from ‘./App.vue’
const app = createApp(App)

Следующий обязательный этап создания приложения это монтирование приложения. Без этого этапа мы не увидим результата в браузере

app.mount(‘#app’) /* здесь #app это идентификатор элемента, который мы создали в index.html */

Для передачи данных в этом примере используем объект data()

const app = createApp({
  data() {
    return {
      ‘message’: ‘Test’
    }
  }
})

Теперь в index.html мы можем вывести данные

<div id=»app»>
  <div>{{ message }}</div>
</div>

На этапе создания этого тестового приложения у меня возникли сложности с отображением в браузере. Проблему пришлось погуглить и решение нашлось в виде добавления дополнительной настройки в vite.config.js

defineConfig({
  resolve: {
    alias: {
      ‘vue’: ‘vue/dist/vue.esm-bundler.js’
    }
  }
})

После этого отображение и обновление в браузере стали работать. Поэтому в TODO list добавим пункт по необходимому изучению vite.js