Vue3-Blogprojekt
Dieses Kapitel führt dich von Grund auf durch die Erstellung eines Vue3-Blogprojekts mit Vite und hilft dir zu verstehen, welche Rolle jede Datei im Projekt spielt.
Umgebungsvorbereitung
Bevor du beginnst, stelle sicher, dass Node.js auf deinem Computer installiert ist.
Node.js ist eine JavaScript-Laufzeitumgebung, mit der wir JS-Code außerhalb des Browsers ausführen können.
Die Entwicklungstoolchain von Vue3 (Vite, npm) basiert auf Node.js.
Prüfe, ob Node.js installiert ist
Öffne ein Terminal (unter Windows CMD oder PowerShell, auf dem Mac Terminal) und gib den folgenden Befehl ein:
$ node -v v20.10.0
Wenn eine Versionsnummer angezeigt wird (empfohlen v16 oder höher), ist es installiert.
Wenn nicht, gehen Sie zunodejs.org, laden Sie die LTS-Version herunter und installieren Sie sie.
Bei der Installation von Node.js ist npm (Node-Paketmanager) automatisch enthalten.
Überprüfungsbefehl:
npm -v
Ein Vue3-Projekt erstellen
Vue empfiehlt offiziell die Verwendung voncreate-vue, dem Scaffolding-Tool, um das Projekt zu initialisieren.
Gehe im Terminal in das Verzeichnis, in dem du das Projekt ablegen möchtest, und führe Folgendes aus:
npm create vue@latest blog-app
Nach der Ausführung erscheint eine Reihe von Optionen. Wählen Sie sie wie folgt aus:
| Option | Selection | Beschreibung |
|---|---|---|
| TypeScript hinzufügen? | No | Anfänger verwenden zunächst reines JS |
| JSX-Unterstützung hinzufügen? | No | Template-Syntax ist intuitiver |
| Vue Router hinzufügen? | Ja | Routing wird später verwendet |
| Pinia hinzufügen? | Ja | State-Management, wird später verwendet |
| Vitest hinzufügen? | No | Vorerst sind keine Tests erforderlich |
| ESLint hinzufügen? | No | Für Anfänger wird es vorerst nicht benötigt |
Nachdem Sie die Auswahlen getroffen haben, führen Sie die folgenden Befehle in der angegebenen Reihenfolge aus:
$ cd blog-app $ npm install $ npm run dev
Zu diesem Zeitpunkt öffnet der Browser automatisch http://localhost:5173. Wenn Sie die Standard-Willkommensseite von Vue sehen, wurde das Projekt erfolgreich gestartet.
npm installEs lädt alle Abhängigkeitspakete gemäß package.json in das Verzeichnis node_modules herunter. Dieser Schritt erfordert eine Internetverbindung und kann beim ersten Ausführen einige Minuten dauern.
Detaillierte Erklärung der Projektverzeichnisstruktur
Öffnen Sie den Ordner blog-app und Sie sehen die folgende Struktur:
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 状态管理
Zweck der Kerndateien
index.html— Die vom Browser aufgerufene Einstiegsdatei.
Vite fügt src/main.js automatisch in diese Datei ein; Sie müssen kein JS manuell importieren.
src/main.js— Die Startdatei der Vue-Anwendung.
Sie ist dafür verantwortlich, die Vue-Anwendungsinstanz zu erstellen, Plugins (Router, State-Management) zu registrieren und die Anwendung an die HTML-Seite zu mounten.
src/App.vue— Die Root-Komponente.
Sie ist der äußerste Container aller Seiten und enthält üblicherweise eine Navigationsleiste, einen Footer und einen Router-Outlet.
Single-File-Komponenten (SFC)
In Vue, jede.vueDatei wird als "Single File Component" (SFC) bezeichnet.
Sie kapselt das Template, die Logik und die Styles derselben Komponente zusammen; eine Datei ist eine unabhängige funktionale Einheit.
Dreiteilige Struktur einer SFC
Beispiel
// Teil 3: Logik — hier JS schreiben
const message = 'Hello Vue3!'
</script>
<template>
<!-- Teil 1: Template — hier HTML schreiben -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* Teil 2: Styles — hier CSS schreiben */
h1 {
color: #427DB8;
}
</style>
Die Reihenfolge dieser drei Tags kann beliebig sein, aber die Branchenkonvention ist:script → template → style。
| Block | Zweck | Verständnis in einem Satz |
|---|---|---|
<script setup> | JS-Logik schreiben, Daten und Methoden definieren | Steuert, was die Komponente tut |
<template> | HTML-Struktur schreiben, Daten binden | Steuert, wie die Komponente aussieht |
<style scoped> | CSS-Stile schreiben | Steuert, ob die Komponente gut aussieht |
scopedDas Attribut `scoped` bewirkt, dass die Stile der aktuellen Komponente nur auf diese selbst angewendet werden und andere Komponenten nicht beeinträchtigen. Dies ist eines der Kernmerkmale von Vue-Single-File-Komponenten.
Template-Syntax vs. JSX
Vue verwendet standardmäßigTemplate-Syntax, um Benutzeroberflächen zu erstellen.
Template-Syntax wird geschrieben in<template>HTML mit Vue-spezifischen Direktiven.
| Merkmal | Template-Syntax | JSX |
|---|---|---|
| Syntaxform | HTML + Vue-Direktiven | HTML-ähnlichen Code in JavaScript schreiben |
| Lernaufwand | Niedrig, nahe an nativem HTML | Erfordert Verständnis des JSX-Kompilierungsmechanismus |
| Flexibilität | Mittel, deklarativ | Hoch, kann frei mit JS manipuliert werden |
| Vues Empfehlungsstufe | Standardmäßig empfohlen | Optionale Unterstützung |
| Anwendbare Szenarien | Die meisten Seitenentwicklungen | Erfordert komplexe Logik zur dynamischen Generierung der UI |
Dieses Tutorial verwendet durchgängig die Template-Syntax, da sie die natürlichste und anfängerfreundlichste Art ist, Vue zu schreiben.
Praktische Übung: Vorlage leeren und das Blog-Grundgerüst schreiben
Lösche nun den standardmäßig generierten Inhalt von App.vue und ersetze ihn durch das Grundgerüst unseres Blogs.
Beispiel
// Die Logik wird später hier hinzugefügt
</script>
<template>
<div id="app">
<!-- Obere Navigationsleiste -->
<header class="navbar">
<h1>Mein Blog</h1>
<nav>
<a href="/">Startseite</a>
<a href="#">Über uns</a>
</nav>
</header>
<!-- Hauptinhaltsbereich -->
<main class="container">
<p>Blog-Inhalt wird hier angezeigt</p>
</main>
<!-- Fußzeile -->
<footer class="footer">
<p>© 2024 Mein Blog. Bereitgestellt von Vue3.</p>
</footer>
</div>
</template>
<style>
/* Globaler Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Navigationsleiste */
.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;
}
/* Hauptinhaltsbereich */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Fußzeile */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
</style>
Nach dem Speichern wird der Browser automatisch aktualisiert, und Sie sehen ein sauberes Blog-Grundgerüst: obere Navigationsleiste + mittlerer Inhaltsbereich + unterer Footer.
Dies ist der Ausgangspunkt für alle nachfolgenden Kapitel.
Kapitelzusammenfassung
In diesem Kapitel hast du drei Dinge erledigt: ein Vue3-Projekt mit Vite erstellt, die Verzeichnisstruktur und die dreiteilige Struktur der SFC verstanden und das grundlegende HTML-Gerüst des Blogs geschrieben.
Wichtigste Erkenntnis: Wissen, dass eine.vueDatei aus drei Teilen besteht: template / script / style, und wie man ein Vue-Projekt zum Laufen bringt.