Проект блога на Vue3
Эта глава с нуля поможет вам создать блог-проект на Vue3 с использованием Vite и понять роль каждого файла в проекте.
Подготовка окружения
Прежде чем начать, убедитесь, что на вашем компьютере установлен Node.js.
Node.js — это среда выполнения JavaScript, которая позволяет запускать JS-код вне браузера.
Инструментальная цепочка разработки Vue3 (Vite, npm) зависит от Node.js.
Проверка, установлен ли Node.js
Откройте терминал (используйте CMD или PowerShell в Windows, Terminal на Mac) и введите следующую команду:
$ node -v v20.10.0
Если отображается номер версии (рекомендуется v16 или выше), значит, он установлен.
Если нет, перейдите наnodejs.orgи скачайте версию LTS, затем установите её.
Установка Node.js автоматически включает npm (менеджер пакетов Node).
Команда для проверки:
npm -v
Создание проекта Vue3
Vue официально рекомендует использоватьcreate-vueинструмент скаффолдинга для инициализации проекта.
В терминале перейдите в каталог, где вы хотите разместить проект, и выполните:
npm create vue@latest blog-app
После запуска появится ряд параметров. Выберите их следующим образом:
| Опция | Выбором | Описание |
|---|---|---|
| Добавить TypeScript? | Нет | Новичкам сначала лучше использовать обычный JS |
| Добавить поддержку JSX? | Нет | Синтаксис шаблонов более интуитивен |
| Добавить Vue Router? | Да | Маршрутизация понадобится позже |
| Добавить Pinia? | Да | Управление состоянием понадобится позже |
| Добавить Vitest? | Нет | Тестирование пока не требуется |
| Добавить ESLint? | Нет | Новичкам это пока не нужно |
После выбора выполните следующие команды по порядку, как будет предложено:
$ cd blog-app $ npm install $ npm run dev
На этом этапе браузер автоматически откроет http://localhost:5173. Если вы увидите стандартную приветственную страницу Vue, проект успешно запустился.
npm installОн скачает все пакеты зависимостей в каталог node_modules в соответствии с package.json. Этот шаг требует подключения к интернету и при первом запуске может занять несколько минут.
Подробное объяснение структуры каталогов проекта
Откройте папку blog-app, и вы увидите следующую структуру:
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.js # JS 入口，创建并挂载 Vue 应用 │ ├── App.vue # 根组件，所有页面的外壳 │ ├── assets/ # 需要编译的静态资源（CSS、图片） │ ├── components/ # 可复用的 Vue 组件 │ ├── views/ # 页面级组件（路由对应的页面） │ ├── router/ # 路由配置 │ └── stores/ # Pinia 状态管理
Назначение основных файлов
index.html— входной файл, к которому обращается браузер.
Vite автоматически внедряет src/main.js в этот файл; вам не нужно вручную импортировать какой-либо JS.
src/main.js— Стартовый файл приложения Vue.
Он отвечает за создание экземпляра приложения Vue, регистрацию плагинов (маршрутизатор, управление состоянием) и монтирование приложения на HTML-страницу.
src/App.vue— Корневой компонент.
Он является самым внешним контейнером всех страниц, обычно содержит панель навигации, нижний колонтитул и router outlet.
Однофайловые компоненты (SFC)
В Vue каждый.vueфайл называется "Single File Component" (SFC).
Он инкапсулирует шаблон, логику и стили одного компонента; один файл — независимая функциональная единица.
Трёхчастная структура SFC
Пример
// Часть 3: Логика — пишите JS здесь
const message = 'Hello Vue3!'
</script>
<template>
<!-- Часть 1: Шаблон — пишите HTML здесь -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* Часть 2: Стили — пишите CSS здесь */
h1 {
color: #427DB8;
}
</style>
Порядок этих трёх тегов может быть произвольным, но общепринятое соглашение таково:script → template → style。
| Блок | Назначение | Понимание в одном предложении |
|---|---|---|
<script setup> | Пишите JS-логику, определяйте данные и методы | Управляет тем, что делает компонент |
<template> | Напишите структуру HTML, привяжите данные | Управляет тем, как выглядит компонент |
<style scoped> | Напишите стили CSS | Управляет тем, хорошо ли выглядит компонент |
scopedАтрибут `scoped` делает так, что стили текущего компонента применяются только к нему самому и не загрязняют другие компоненты. Это одна из ключевых возможностей однофайловых компонентов Vue.
Синтаксис шаблонов против JSX
Vue по умолчанию используетсинтаксис шаблоновдля создания интерфейсов.
Синтаксис шаблонов записывается в<template>HTML с директивами, специфичными для Vue.
| Характеристика | Синтаксис шаблонов | JSX |
|---|---|---|
| Форма синтаксиса | HTML + директивы Vue | Написание HTML-подобного кода на JavaScript |
| Затраты на обучение | Низкий, близко к нативному HTML | Требует понимания механизма компиляции JSX |
| Гибкость | Средний, декларативный | Высокий, можно свободно манипулировать с помощью JS |
| Уровень рекомендации Vue | Рекомендуется по умолчанию | Необязательная поддержка |
| Применимые сценарии | Разработка большинства страниц | Требуется сложная логика для динамической генерации UI |
В этом руководстве повсюду используется синтаксис шаблонов, потому что это наиболее естественный и удобный для начинающих способ написания на Vue.
Практика: очистите шаблон и напишите каркас блога
Теперь очистите сгенерированное по умолчанию содержимое App.vue и замените его базовым каркасом нашего блога.
Пример
// Логика будет добавлена здесь позже
</script>
<template>
<div id="app">
<!-- Верхняя панель навигации -->
<header class="navbar">
<h1>Мой блог</h1>
<nav>
<a href="/">Главная</a>
<a href="#">О нас</a>
</nav>
</header>
<!-- Область основного содержимого -->
<main class="container">
<p>Здесь будет отображаться содержимое блога</p>
</main>
<!-- Подвал -->
<footer class="footer">
<p>© 2024 Мой блог. Работает на Vue3.</p>
</footer>
</div>
</template>
<style>
/* Глобальный сброс */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Панель навигации */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar h1 {
font-size: 24px;
color: #427DB8;
}
.navbar a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Область основного содержимого */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Подвал */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
</style>
После сохранения браузер автоматически обновится, и вы увидите чистый каркас блога: верхняя панель навигации + центральная область контента + нижний футер.
Это отправная точка для всех последующих глав.
Итоги главы
В этой главе вы выполнили три вещи: создали проект Vue3 с Vite, разобрались со структурой каталогов и трёхчастной структурой SFC, а также написали базовый HTML-скелет блога.
Главный вывод: знать, что.vueфайл состоит из трёх частей: template / script / style, и как запустить проект Vue.