vue commerce lab
1.0.0
Dieses Repository enthält ein experimentelles E-Commerce-Dashboard, das als praktische Anwendung zum Erlernen und Implementieren von Laravel dient. Ich habe dies mit Laravel Breeze ausgestattet und nutze Laravel Valet für die lokale Entwicklung.
route() Funktion verfügbar und ermöglicht so eine einfache Routengenerierung in Vue-Komponenten.Dieses Projekt dient als umfassendes Beispiel für alle, die daran interessiert sind, Webanwendungen mit vollem Funktionsumfang unter Verwendung dieser Technologien zu entwickeln.
Klonen Sie das Repository (in Ihr Valet-Sites-Verzeichnis):
git clone [email protected]:gregrickaby/vue-commerce-lab.gitAbhängigkeiten installieren:
composer install && npm install Erstellen Sie .env Datei:
cp .env.example .env Erstellen Sie die Datei database.sqlite :
touch database/database.sqliteAnwendungsschlüssel generieren:
php artisan key:generateFühren Sie eine Migration durch:
php artisan migrate:freshSeed die Datenbank:
php artisan db:seedStellen Sie die PHP-Version auf 8.3 ein:
valet isolate [email protected]Sichern Sie die Website:
valet secureEntwicklungsserver starten:
npm run devBesuchen Sie die Website: https://vue-commerce-lab.test und melden Sie sich mit den folgenden Anmeldeinformationen an:
password Modelle befinden sich im Verzeichnis app/Models . Jedes Modell verfügt über eine entsprechende Factory und einen Seeder in den Verzeichnissen database/factories und database/seeders .
Modelle sind für die Verwaltung der Daten der Anwendung verantwortlich. Sie erhalten Eingaben vom Controller, validieren sie und senden sie dann an die Datenbank.
Diese Anwendung verwendet Vue und Inertia, daher befinden sich die Ansichten im Verzeichnis resources/js/pages und werden über die Datei web.php weitergeleitet.
Ansichten sind dafür verantwortlich, dem Benutzer die Daten anzuzeigen. Sie empfangen Daten vom Controller und geben sie dann an den Browser weiter.
Controller befinden sich im Verzeichnis app/Http/Controllers . Für jeden Controller gibt es einen entsprechenden Test im Verzeichnis tests/Feature
Controller sind für die Bearbeitung von Anfragen und die Rückgabe von Antworten verantwortlich. Sie erhalten Eingaben vom Benutzer, validieren sie und geben sie dann an das Modell weiter.
Routen befinden sich im routes . Die Datei web.php enthält alle Routen für die Anwendung.
Vue.js-Dateien befinden sich im Verzeichnis resources/js .
Die Verzeichnisstruktur folgt den Laravel-Standardkonventionen, mit der Hinzufügung eines types für TypeScript-Schnittstellen und -Typen sowie eines utils -Verzeichnisses für Dienst- und Hilfsfunktionen.
├── resources
│ ├── css
│ │ └── app.css <-- TailwindCSS
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
│ │ │ ├── Molecules
│ │ │ ├── Organisms
│ │ ├── Layouts
│ │ ├── Pages
│ │ │ ├── Customers
│ │ │ │ ├── Create.vue
│ │ │ │ ├── Index.vue
│ │ │ │ └── {customer} <-- Dynamic route
│ │ │ │ ├── Edit.vue
│ │ │ │ └── Show.vue
│ │ ├── app.ts <-- Vue app
│ │ ├── types
│ │ │ └── index.d.ts <-- Typescript interfaces and types
│ │ └── utils
│ │ └── index.ts <-- Utility and helper functions
│ └── views
│ ├── app.blade.php
│ └── welcome.blade.php
Ordner mit einem {} um sie herum sind dynamische Routen. Beispielsweise ist /Pages/Customers/{customers}/Edit.vue eine dynamische Route, die mit jeder Kunden-ID übereinstimmt. Die ID ist dann in der Edit.vue -Komponente verfügbar.
Diese Anwendung ist zum Testen sowohl mit PHPUnit als auch mit Vitest ausgestattet. Es nutzt außerdem Github Actions für kontinuierliche Integration und Tests sowie Storybook für die isolierte Entwicklung von UI-Komponenten.
Diese Anwendung ist mit PHPUnit-Tests für alle Modelle und Controller ausgestattet. PHP-Tests befinden sich im Verzeichnis /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Laravel-Routen geben Trägheitsantworten zurück, die vom Vorhandensein von Vue-Komponenten abhängen. Ohne die erstellten Front-End-Assets sind diese Komponenten nicht verfügbar, was zu Fehlern bei Tests führt, die Anfragen an diese Routen stellen. Um dies zu vermeiden, müssen Sie den Entwicklungsserver im Hintergrund ausführen, während Tests ausgeführt werden .
Starten Sie den Entwicklungsserver:
npm run devFühren Sie PHPUnit-Tests aus mit:
php artisan testFühren Sie einen bestimmten Test durch mit:
php artisan test --filter=CustomerTest Diese Anwendung ist sowohl mit Vitest (offizieller Testläufer) als auch mit Vue Test Utils (offizielle Testbibliothek) zum Testen von Vue-Komponenten ausgestattet. Tests müssen neben der Komponente platziert und ComponentName.test.ts benannt werden:
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
Sie können die Tests ausführen mit:
npm run testVitest führt die Tests im Überwachungsmodus aus, sodass Sie Änderungen an der Komponente vornehmen und die Ergebnisse in Echtzeit sehen können.
Komponententests werden in TypeScript geschrieben und verwenden die Vitest-API für Behauptungen. Hier ist ein Beispiel:
import ApplicationLogo from '@/Components/Atoms/ApplicationLogo/ApplicationLogo.vue'
import { mount } from '@vue/test-utils'
import { describe , expect , test } from 'vitest'
/**
* Define a test suite.
*
* @see https://vitest.dev/api/#describe
*/
describe ( 'ApplicationLogo' , ( ) => {
/**
* Mount the component.
*
* @see https://vue-test-utils.vuejs.org/api/#mount
*/
const wrapper = mount ( ApplicationLogo )
/**
* Assert the component renders.
*
* @see https://vitest.dev/api/expect.html
*/
test ( 'component renders' , ( ) => {
expect ( wrapper ) . toBeTruthy ( )
} )
/**
* Assert the component is a SVG.
*/
test ( 'component is SVG' , ( ) => {
wrapper . find ( 'svg' )
} )
/**
* Assert the component matches the snapshot.
*
* @see https://vitest.dev/api/expect.html#tomatchsnapshot
*/
test ( 'component matches snapshot' , ( ) => {
expect ( wrapper . html ( ) ) . toMatchSnapshot ( )
} )
} ) Github Actions führt die Tests auch für jeden PR im main durch.
Diese Anwendung ist mit ESLint ausgestattet und für das Parsen von TypeScript konfiguriert. Das automatische Linting von JavaScript- und Vue-Dateien erfolgt on_save .
Sie können lint auch manuell ausführen:
npm run lint Diese Anwendung ist mit Stylelint und dem Prettier-Plugin für TailwindCSS ausgestattet. Das automatische Linting und Formatieren erfolgt on_save .
Für on_save ist die automatische Formatierung sowohl für JavaScript- als auch für PHP-Dateien konfiguriert. Weitere Informationen finden Sie in den VSCode-Einstellungen und Erweiterungskonfigurationen.
Führen Sie Prettier und Pint manuell aus mit:
npm run format && composer run lintStorybook ansehen: https://gregrickaby.github.io/vue-commerce-lab/
Diese Anwendung ist mit Storybook für die isolierte Entwicklung von UI-Komponenten ausgestattet. Geschichten müssen in CSF geschrieben und neben der Komponente im Verzeichnis resources/js/Components platziert werden. Geschichten müssen ComponentName.stories.ts heißen:
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
Führen Sie Storybook aus mit:
npm run storybookErstellen Sie ein Storybook mit:
npm run build:storybookDie MIT-Lizenz (MIT). Siehe LIZENZ
