Создание проекта

Проект на Vue создаётся официальной утилитой create-vue. Она собирает заготовку на Vite — инструменте, который запускает сервер разработки и собирает файлы для публикации.

Создание

Откройте терминал в папке, где будут лежать проекты, и выполните:

npm create vue@latest

Утилита задаст несколько вопросов. Введите имя проекта todo-app. В списке дополнительных возможностей (TypeScript, Router, Pinia, Vitest и другие) пока ничего не отмечайте — каждую из них курс подключит позже отдельной командой.

cd todo-app
npm install
npm run dev

npm install скачивает зависимости в папку node_modules, npm run dev запускает сервер разработки. В терминале появится адрес http://localhost:5173 — откройте его, и вы увидите стартовую страницу с логотипом Vue.

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

todo-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
│   └── favicon.ico
└── src/
    ├── main.js
    ├── App.vue
    ├── assets/
    └── components/
        └── HelloWorld.vue

Точка входа

// src/main.js
import './assets/main.css'
 
import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

createApp создаёт приложение из корневого компонента, а mount('#app') выводит его внутрь блока с id="app" из index.html. Этот файл вы будете менять, когда подключите роутер и хранилище.

Чистый лист

Стартовые компоненты больше не нужны. Удалите содержимое папки src/components/ и замените src/App.vue:

<!-- src/App.vue -->
<template>
  <h1>Мои задачи</h1>
</template>

Сохраните файл — страница в браузере обновится сама и покажет заголовок «Мои задачи». Перезапускать сервер не нужно.

Команды проекта

Частая ошибка

Открывать index.html двойным щелчком бесполезно — появится пустая страница. Браузер не умеет читать файлы .vue, их на лету превращает в обычный JavaScript сервер Vite. Всегда работайте через npm run dev и адрес из терминала, а сервер останавливайте сочетанием Ctrl+C.