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.