Vue3-Verzeichnisstruktur
Im vorherigen Kapitel haben wir npm verwendet, um das Projekt zu installieren (Vue-cli und Vite). Wir haben das Verzeichnis in einer IDE geöffnet (Vscode, Atom usw.), und die Struktur ist wie folgt:
Kommandozeilen-Tool vue-cli (example-vue3-test):
Vite（example-vue3-test2）
Ein Standard-Vue-3-Projekt kann üblicherweise in drei Schichten unterteilt werden:
- Projektstammverzeichnis:Build-Tools und Projektkonfiguration
- public-Verzeichnis:Statische Ressourcen, die nicht in den Build einbezogen werden
- src-Verzeichnis:Hier befindet sich fast der gesamte Geschäftscode; die tägliche Entwicklung findet im Wesentlichen in diesem Verzeichnis statt.
Typische Vue-Projektstruktur:
vue-project/ ├── public/ # 静态资源，直接复制到构建输出目录 │ └── favicon.ico # 网站图标 ├── src/ │ ├── assets/ # 静态资源（如图片、字体、CSS） │ │ └── logo.png │ ├── components/ # 可复用的通用组件 │ │ └── CommonHeader.vue │ ├── composables/ # 可复用的 Composition API 逻辑（可选） │ │ └── useFetch.js │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理（或 store/ 用于 Vuex） │ │ └── index.js │ ├── utils/ # 工具函数（如请求封装、格式化） │ │ └── request.js │ ├── views/ # 页面级组件（对应路由页面） │ │ ├── HomeView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 入口文件（创建 Vue 应用） ├── index.html # HTML 入口模板 ├── vite.config.js # Vite 配置文件 ├── package.json # 项目依赖与脚本 ├── .gitignore # Git 忽略文件 ├── .env # 环境变量（开发） ├── .env.production # 环境变量（生产） └── README.md # 项目说明
Verzeichniserklärung
| Pfad | Beschreibung |
|---|---|
| public/ | Speichert statische Ressourcen, die nicht vom Build-Tool verarbeitet werden; sie werden direkt in das dist-Verzeichnis kopiert, üblicherweise verwendet für favicon, robots.txt usw. |
| public/favicon.ico | Website-Symbol (favicon) |
| src/ | Hauptverzeichnis für den Projektquellcode; hier wird der gesamte Entwicklungscode abgelegt |
| src/assets/ | Enthält statische Ressourcen wie Bilder, Schriftarten und globales CSS; sie werden von Vite verarbeitet (unterstützt import) |
| src/components/ | Enthält wiederverwendbare gemeinsame Komponenten (wie Buttons, Cards, Layout-Komponenten) |
| src/composables/ | Enthält wiederverwendbare Logikfunktionen der Composition API (der von Vue 3 empfohlene Ansatz zur Code-Wiederverwendung) |
| src/router/ | Vue Router-Konfigurationsverzeichnis, enthält normalerweise index.js zur Definition der Routentabelle |
| src/stores/ | Pinia State-Management-Verzeichnis (offiziell von Vue 3 empfohlen), enthält jedes Store-Modul |
| src/utils/ | Enthält Hilfsfunktionen wie axios-Wrapper, Zeitformatierung, Konstanten usw. |
| src/views/ | Enthält Komponenten auf Seitenebene, die normalerweise eins zu eins mit Routen übereinstimmen (Routenseiten). |
| src/App.vue | Die Stammkomponente der Vue-Anwendung, die<router-view>und andere Einstiegs-Renderpunkte enthält |
| src/main.js | Projekt-Einstiegsdatei, erstellt die Vue-Anwendungsinstanz, bindet Plugins (Router, Pinia usw.) ein und mountet die Anwendung an #app |
| index.html | HTML-Vorlagendatei, die den<div></div>Mount-Punkt enthält |
| vite.config.js | Konfigurationsdatei für das Vite-Build-Tool; Plugins, Aliase, Proxy usw. können angepasst werden. |
| package.json | Projektabhängigkeiten, Skriptbefehle (wie dev, build, preview) |
| .gitignore | Git-Ignore-Datei; ignoriert normalerweise node_modules, dist, .env usw. |
| .env / .env.production | Umgebungsvariablendatei, die verwendet wird, um API-Adressen usw. für verschiedene Umgebungen zu konfigurieren (Vite-Variablen, die mit VITE_ beginnen) |
| README.md | Projektdokumentation |
Wenn das Projekt wächst, müssen Sie möglicherweise auch diese Ordner hinzufügen:
- src/layouts/: Verschiedene Seitenlayouts (wie AdminLayout.vue, GuestLayout.vue).
- src/plugins/: Benutzerdefinierte Vue-Plugins (wie die automatische globale Komponentenregistrierung).
- src/directives/: Benutzerdefinierte Direktiven (wie v-loading).
- src/types/: Globale TypeScript-Typdeklarationen.
- tests/odertests/: Unit-/E2E-Tests (Vitest + Vue Test Utils).
- src/api/: Separate Module für API-Schnittstellenaufrufe (feiner granuliert als utils/request).
Als Nächstes nehmen wir example-vue3-test2 als Beispiel, öffnen die Datei src/APP.vue im Verzeichnis, und der Code ist wie folgt (Erklärungen sind in den Kommentaren):
Code der Datei src/APP.vue
<!-- Anzeigevorlage -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Vue-Code -->
<script>
/* Importiere die HelloWorld-Komponente aus src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Vue-Code -->
<script>
/* Importiere die HelloWorld-Komponente aus src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Als Nächstes können wir versuchen, das initialisierte Projekt zu modifizieren und src/APP.vue in den folgenden Code zu ändern:
Code der Datei src/APP.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Willkommen beim Beispiel-Tutorial!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Willkommen beim Beispiel-Tutorial!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Öffnen Sie die Seitehttp://localhost:3000/, sie wird normalerweise nach Änderungen automatisch aktualisiert, und der Anzeigeeffekt ist wie folgt:
