Файлы приложения на Vue

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

index.html — это страница. В её body лежат только пустой элемент и скрипт:

<div id="app"></div>
<script type="module" src="main.js"></script>

Всё, что вы видите в предпросмотре, Vue помещает в #app. Атрибут type="module" позволяет скрипту использовать import, который мы сейчас увидим.

main.js запускает приложение:

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

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

Строка, которая начинается с import, берёт что-то из другого файла: createApp из Vue, App из файла App.vue (./ значит «в этой же папке»), а третья строка подключает стили из style.css. Подробнее об import вы узнаете в уроке «Компоненты». Последняя строка создаёт приложение из App и монтирует его в #app: Vue показывает приложение внутри этого элемента.

main.js одинаков в каждом упражнении курса, поэтому менять его не придётся.

App.vue — само приложение, и именно здесь вы будете работать большую часть времени. Это компонент: часть страницы со своими HTML, JavaScript и CSS в одном файле с расширением .vue. Большие приложения состоят из множества компонентов, а писать их вы научитесь в уроке «Компоненты». Пока всё приложение — один компонент, App.

style.css содержит стили всего приложения на CSS, который вы знаете по курсу CSS.

В проекте на Vue на вашем компьютере те же файлы и ещё несколько папок. Такой проект вы создадите в последнем уроке.