Projekt-Überblick#

Nachfolgend die Ordnerstruktur und einige Anmerkungen.

.
├── index.html
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── css
│   │   │   ├── base.css
│   │   │   └── tachyons.min.css
│   │   ├── fonts
│   │   └── logo.svg
│   ├── components
│   │   ├── ExpBeschreibung.vue
│   │   └── __tests__
│   │       └── ExpBeschreibung.spec.js
│   ├── main.js
│   ├── router
│   │   └── index.js
│   └── views
│       ├── AboutView.vue
│       ├── Exp001ConsoleLog.vue
│       ├── Exp002RenameIt.vue
│       ├── Exp003RenameIt.vue
│       ├── Exp004RenameIt.vue
│       ├── Exp005RenameIt.vue
│       ├── Exp006RenameIt.vue
│       ├── Exp007RenameIt.vue
│       ├── Exp008RenameIt.vue
│       └── Exp009RenameIt.vue
└── vite.config.js

Ausgangssituation#

Erzeugt wurde die Ordnerstruktur mit einem Dialog, der durch

npm init vue@latest

initiiert wurde. Folgende Antworten/Eingaben wurden gewählt/gegeben (rot gekennzeichnet):

  • ✔ Project name: … vue-labor

  • ✔ Add TypeScript? … No

  • ✔ Add JSX Support? … No

  • ✔ Add Vue Router for Single Page Application development? … Yes

  • ✔ Add Pinia for state management? … No

  • ✔ Add Vitest for Unit Testing? … Yes

  • ✔ Add Cypress for End-to-End testing? … Yes

  • ✔ Add ESLint for code quality? … Yes

Bearbeitet bzw. ausgetauscht wurden in der Standardstruktur:

  • Ordner »css« mit eigenem Layout ergänzt.

  • ExpBeschreibung.vue – als Beispiel-Komponente, die von alle Views verwendet wird.

  • Ordner: »views« mit zehn vorbereiteten Templates erweitert.

  • In »router/index.js« die Routen zu den Views hinzugefügt.

  • In »src/App.vue« die Menüstruktur und die Verlinkung zu den Routen ergänzt.