Поздравляем!

Поздравляем: ваш трекер привычек работает, а вы дошли до конца курса по Vue! Приложение загружает готовые привычки из файла, позволяет отмечать их, добавлять свои и удалять, фильтрует список, показывает прогресс и серию дней и всё это запоминает. И вы построили его сами, кусочек за кусочком.

Последнее улучшение. Серия может прерваться, но лучшую серию забывать не стоит. Сохраните её композаблом под ключом "best", а в finishDay(), после того как серия изменилась, увеличивайте рекорд, если серия стала длиннее:

const best = useLocalStorage("best", 0);

if (streak.value > best.value) {
    best.value = streak.value;
}

Чему вы научились. Посмотрите, как весь курс нашёл своё место в вашем приложении:

• Компоненты: App.vue хранит данные, а HabitItem.vue показывает одну привычку. Пропсы спускают данные вниз (:habit="habit"), а события поднимают вверх (emit('toggle', habit.id) и @toggle="toggle").
• Шаблон: {{ }} показывает значения, :class зачёркивает выполненную привычку, а :style задаёт ширину полосы.
• Состояние: рефы хранят то, что меняется, — с .value в скрипте и без него в шаблоне, — и при любом их изменении Vue сам обновляет страницу.
• Условия и списки: v-if, v-else-if и v-else выбирают между загрузкой, ошибкой и приложением, а v-for с :key показывает привычки.
• Формы: v-model с .trim, @submit.prevent и сообщение об ошибке.
• Вычисляемые значения: счётчик, процент, allDone и отфильтрованный список, которые пересчитываются при каждом изменении привычек.
• Жизненный цикл: onMounted загружает привычки через fetch(), когда приложение уже на странице.
• Наблюдатели и композаблы: useLocalStorage сохраняет любое значение с помощью watch, так что три строки сохраняют три значения.

В приложении нет слотов, но вы их тоже знаете: с их помощью компонент, например панель из урока «Слоты» или лайтбокс фотогалереи, получает от родителя целые куски страницы.

Vue на вашем компьютере. Здесь наш сайт готовит ваши файлы при каждом нажатии «Запустить». На вашем компьютере это делает инструмент Vite, а create-vue, официальное средство Vue для создания проекта, всё настраивает за вас. Вам понадобятся Node.js (берите версию LTS), в комплекте с которым идёт npm, программа для установки пакетов, и терминал (командная строка). В терминале перейдите в папку, где хотите хранить проекты, и выполните:

npm create vue@latest

create-vue задаст несколько вопросов: сначала название проекта, например habit-tracker (оно же станет названием его папки), а потом что добавить в проект, например TypeScript, Vue Router или Pinia. Пока ничего из этого не нужно, так что не выбирайте ничего. Если он спросит что-то ещё, оставьте предложенный ответ. В конце он покажет следующие команды:

cd habit-tracker
npm install
npm run dev

cd переходит в папку проекта, npm install скачивает Vue, Vite и всё остальное, что нужно проекту (в папку node_modules), а npm run dev запускает Vite. Он покажет адрес вроде http://localhost:5173/: откройте его в браузере. Не закрывайте терминал: при каждом сохранении файла страница в браузере обновляется сама. Ctrl+C в терминале останавливает Vite.

Файлы проекта. Это те же файлы, что в упражнениях, только разложенные по папкам:

• index.html лежит в главной папке проекта, и в нём тот же <div id="app">. Его скрипт загружает /src/main.js.
• src/main.js монтирует App через createApp(App).mount("#app"), как и ваш main.js.
• src/App.vue — главный компонент. В новом проекте в нём лежит пример: замените его своим.
• src/components/ — для остальных компонентов, например HabitItem.vue (если такой папки нет, создайте её). Импорт в App.vue тогда станет таким: import HabitItem from "./components/HabitItem.vue";. Примеры компонентов из этой папки можно удалить.
• public/ — для файлов, которые страница загружает как есть. Положите туда habits.json, и fetch("habits.json") его найдёт.

Положите useLocalStorage.js в src, рядом с App.vue, и его импорт останется как есть. (В больших проектах композаблы часто держат в отдельной папке, src/composables.) Ваш style.css тоже идёт в src, а src/main.js подключает его через import "./style.css"; вместо стилей из примера, если они там есть.

Vue DevTools. Добавьте в браузер расширение Vue DevTools (для Chrome, Edge и Firefox; как это сделать, объясняет devtools.vuejs.org). В инструментах разработчика (F12) появится вкладка Vue: она показывает ваши компоненты деревом, вместе с их пропсами и состоянием. Там можно даже изменить реф и увидеть, как меняется страница. Это работает на страницах, запущенных через npm run dev.

Публикация в интернете. Когда приложение готово, npm run build подготавливает его для интернета: Vite кладёт готовые файлы в папку dist, а все файлы .vue превращаются в обычный JavaScript, понятный любому браузеру. npm run preview показывает готовую версию на вашем компьютере. Затем папка dist отправляется на веб-сервер. Быстрее всего это сделать через Netlify Drop (app.netlify.com/drop): перетащите папку dist на страницу, и вы получите адрес, который можно отправить кому угодно (чтобы сайт остался в сети, зарегистрируйте бесплатный аккаунт). Сервисы вроде Netlify и Vercel умеют и сами собирать и публиковать проект при каждом изменении кода на GitHub, сайте для хранения кода.

Что дальше? Вы теперь знаете основу Vue: одни и те же компоненты, рефы и вычисляемые значения есть в каждом приложении на Vue, маленьком или большом. Вот что изучать дальше:

• Vue Router — для приложений из нескольких страниц, у каждой из которых свой адрес, например / и /stats. Каждая страница — это компонент.
• Pinia — для состояния, общего для многих компонентов, например заказа в кафе. Это как модуль order.js из урока «Композаблы», только с большим набором инструментов и поддержкой в DevTools.
• TypeScript: с <script setup lang="ts"> вы записываете типы своих пропсов и рефов, а редактор находит многие ошибки ещё до запуска приложения. Этому учит курс по TypeScript.
• Nuxt — фреймворк на основе Vue для целых сайтов. Он делает страницу из каждого файла в папке pages, умеет отрисовывать страницы на сервере, так что посетители и поисковые системы сразу получают готовый HTML, а его серверные маршруты позволяют вашему коду на сервере отвечать на fetch() страницы.

В старых учебниках вы снова встретите Options API из первого урока: компоненты, записанные через export default { data() { … }, methods: { … } } вместо <script setup>. По сути это тот же Vue, так что с вашими знаниями вы быстро в нём разберётесь. Документация на vuejs.org объясняет всё, с чем вы здесь познакомились, в обоих стилях.