vue commerce lab
1.0.0
Ce référentiel héberge un tableau de bord expérimental de commerce électronique qui sert d'application pratique pour apprendre et mettre en œuvre Laravel. J'ai échafaudé cela avec Laravel Breeze et j'utilise Laravel Valet pour le développement local.
route() , permettant une génération facile de routes dans les composants Vue.Ce projet constitue un exemple complet pour toute personne intéressée par le développement d'applications Web complètes utilisant ces technologies.
Clonez le référentiel (dans votre répertoire de sites Valet) :
git clone [email protected]:gregrickaby/vue-commerce-lab.gitInstaller les dépendances :
composer install && npm install Créez un fichier .env :
cp .env.example .env Créez le fichier database.sqlite :
touch database/database.sqliteGénérer la clé d'application :
php artisan key:generateExécutez une migration :
php artisan migrate:freshAmorcer la base de données :
php artisan db:seedDéfinissez la version PHP sur 8.3 :
valet isolate [email protected]Sécurisez le site :
valet secureDémarrer le serveur de développement :
npm run devVisitez le site : https://vue-commerce-lab.test et connectez-vous avec les identifiants suivants :
password Les modèles se trouvent dans le répertoire app/Models . Chaque modèle possède une usine et un semoir correspondants dans les répertoires database/factories et database/seeders .
Les modèles sont responsables de la gestion des données de l’application. Ils reçoivent les entrées du contrôleur, les valident, puis les envoient à la base de données.
Cette application utilise Vue et Inertia, les vues sont donc dans le répertoire resources/js/pages et acheminées via le fichier web.php.
Les vues sont responsables de l'affichage des données à l'utilisateur. Ils reçoivent les données du contrôleur, puis les restituent au navigateur.
Les contrôleurs se trouvent dans le répertoire app/Http/Controllers . Chaque contrôleur a un test correspondant dans le répertoire tests/Feature
Les contrôleurs sont responsables du traitement des demandes et du renvoi des réponses. Ils reçoivent les entrées de l'utilisateur, les valident, puis les transmettent au modèle.
Les itinéraires se trouvent dans le répertoire routes . Le fichier web.php contient toutes les routes de l'application.
Les fichiers Vue.js se trouvent dans le répertoire resources/js .
La structure des répertoires suit les conventions standard de Laravel, avec l'ajout d'un répertoire types pour les interfaces et les types TypeScript, et d'un répertoire utils pour les fonctions utilitaires et d'assistance.
├── 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
Les dossiers entourés d'un {} sont des routes dynamiques. Par exemple, /Pages/Customers/{customers}/Edit.vue est un itinéraire dynamique qui correspondra à n'importe quel identifiant client. L'ID est alors disponible dans le composant Edit.vue .
Cette application est équipée à la fois de PHPUnit et de Vitest pour les tests. Il exploite également Github Actions pour une intégration et des tests continus, et Storybook pour développer des composants d'interface utilisateur de manière isolée.
Cette application est équipée de tests PHPUnit pour tous les modèles et contrôleurs. Les tests PHP se trouvent dans le répertoire /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Les routes Laravel renvoient des réponses d'inertie qui dépendent de la présence de composants Vue. Sans les ressources frontales intégrées, ces composants ne seront pas disponibles, ce qui entraînera des échecs dans les tests qui effectuent des requêtes sur ces routes. Pour éviter cela, vous devez exécuter le serveur de développement en arrière-plan lors de l'exécution des tests .
Démarrez le serveur de développement :
npm run devExécutez les tests PHPUnit avec :
php artisan testExécutez un test spécifique avec :
php artisan test --filter=CustomerTest Cette application est équipée à la fois de Vitest (exécuteur de test officiel) et de Vue Test Utils (bibliothèque de test officielle) pour tester les composants Vue. Les tests doivent être placés à côté du composant et nommés ComponentName.test.ts :
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
Vous pouvez exécuter les tests avec :
npm run testVitest exécutera les tests en mode montre, afin que vous puissiez apporter des modifications au composant et voir les résultats en temps réel.
Les tests de composants sont écrits en TypeScript et utilisent l'API Vitest pour les assertions. Voici un exemple :
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 exécutera également les tests sur chaque PR vers la branche main .
Cette application est équipée d'ESLint et configurée pour analyser TypeScript. Le peluchage automatique des fichiers JavaScript et Vue se produit on_save .
Vous pouvez également exécuter Lint manuellement :
npm run lint Cette application est équipée de Stylelint et du plugin Prettier pour TailwindCSS. Le peluchage et le formatage automatiques se produisent on_save .
Le formatage automatique des fichiers JavaScript et PHP est configuré pour on_save . Veuillez consulter les paramètres VSCode et les configurations d'extension pour plus d'informations.
Exécutez manuellement Prettier et Pint avec :
npm run format && composer run lintVoir le livre d'histoires : https://gregrickaby.github.io/vue-commerce-lab/
Cette application est équipée de Storybook pour développer des composants d'interface utilisateur de manière isolée. Les histoires doivent être écrites en CSF, placées à côté du composant dans le répertoire resources/js/Components . Les histoires doivent être nommées ComponentName.stories.ts :
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
Exécutez Storybook avec :
npm run storybookCréez un livre d'histoires avec :
npm run build:storybookLa licence MIT (MIT). Veuillez consulter LICENCE
