Импорт и экспорт

Каждый файл приложения на Vue — это модуль: часть программы со своими переменными. То, что создано в модуле, существует только в нём, поэтому App.vue не видит переменных другого файла. Файл делится значением, экспортируя его, а файл, которому значение нужно, его импортирует. Строки с import вы пишете с первого урока. Вот как они работают.

В файле может быть один экспорт по умолчанию — его главное значение, записанное через export default. Импортируется он без фигурных скобок, под именем, которое выбирает импортирующий файл:

// cafe.js
const menu = [
    { id: 1, name: "Эспрессо", price: 2 },
    { id: 2, name: "Капучино", price: 3 },
];

export default menu;

// App.vue
import menu from "./cafe.js";

Файл может также экспортировать сколько угодно значений под их именами: для этого перед const пишут export. Такие именованные экспорты импортируют в фигурных скобках, под их точными именами, через запятую:

// cafe.js
export const cafeName = "Кафе «Уголок»";
export const openingHours = "с 7:00 до 19:00";

// App.vue
import { cafeName, openingHours } from "./cafe.js";

Когда в файле есть и то и другое, один импорт получит оба: сначала экспорт по умолчанию, потом именованные в скобках, import menu, { cafeName } from "./cafe.js";. Скобки там, где их быть не должно, или наоборот — частая ошибка: тогда импорт не находит значение, и страница ничего не показывает на его месте. (В проекте на вашем компьютере браузер в таком случае останавливается на импорте с ошибкой, что файл «does not provide an export named …».)

Теперь вы можете прочитать любой импорт, который встречали:

• import { ref } from "vue"; импортирует именованный экспорт ref пакета vue. Имя без ./ — это пакет, библиотека, установленная в проекте.
• import App from "./App.vue"; в main.js импортирует экспорт по умолчанию файла App.vue: компонент.
• import "./style.css"; ничего не импортирует по имени. Он просто добавляет на страницу таблицу стилей.

А где же экспорт в App.vue? Вы его не пишете: <script setup> сам экспортирует компонент как экспорт файла по умолчанию. Поэтому в import MenuItem from "./MenuItem.vue"; нет скобок. А собственных экспортов в <script setup> быть не может; красная полоса скажет <script setup> cannot contain ES module exports. Значения, которые нужны нескольким компонентам, кладут в файл .js, как здесь cafe.js.

А расширение? Vite, инструмент, который запускает проекты на Vue на вашем компьютере, находит файл .js и без него, а файл .vue — только с ним. Чтобы не усложнять, пишите расширение в каждом импорте своих файлов.