vue commerce lab
1.0.0
Este repositorio alberga un panel de comercio electrónico experimental que sirve como una aplicación práctica para aprender e implementar Laravel. Construí esto con Laravel Breeze y uso Laravel Valet para el desarrollo local.
route() , lo que permite una fácil generación de rutas en los componentes de Vue.Este proyecto sirve como un ejemplo integral para cualquier persona interesada en desarrollar aplicaciones web con todas las funciones utilizando estas tecnologías.
Clona el repositorio (en el directorio de sitios de Valet):
git clone [email protected]:gregrickaby/vue-commerce-lab.gitInstalar dependencias:
composer install && npm install Crear archivo .env :
cp .env.example .env Cree el archivo database.sqlite :
touch database/database.sqliteGenerar clave de aplicación:
php artisan key:generateEjecute una migración:
php artisan migrate:freshSembrar la base de datos:
php artisan db:seedConfigure la versión de PHP en 8.3:
valet isolate [email protected]Asegure el sitio:
valet secureInicie el servidor de desarrollo:
npm run devVisite el sitio: https://vue-commerce-lab.test e inicie sesión con las siguientes credenciales:
password Los modelos se encuentran en el directorio app/Models . Cada modelo tiene una fábrica y una sembradora correspondientes en los directorios database/factories y database/seeders .
Los modelos son los encargados de gestionar los datos de la aplicación. Reciben información del controlador, la validan y luego la envían a la base de datos.
Esta aplicación utiliza Vue e Inertia, por lo que las vistas están en el directorio resources/js/pages y se enrutan a través del archivo web.php.
Las vistas son responsables de mostrar los datos al usuario. Reciben datos del controlador y luego los muestran al navegador.
Los controladores se encuentran en el directorio app/Http/Controllers . Cada controlador tiene una prueba correspondiente en el directorio tests/Feature .
Los controladores son responsables de manejar las solicitudes y devolver las respuestas. Reciben información del usuario, la validan y luego la pasan al modelo.
Las rutas se encuentran en el directorio routes . El archivo web.php contiene todas las rutas de la aplicación.
Los archivos Vue.js se encuentran en el directorio resources/js .
La estructura del directorio sigue las convenciones estándar de Laravel, con la adición de un directorio types para interfaces y tipos de TypeScript, y un directorio utils para funciones auxiliares y de utilidad.
├── 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
Las carpetas con un {} alrededor son rutas dinámicas. Por ejemplo, /Pages/Customers/{customers}/Edit.vue es una ruta dinámica que coincidirá con cualquier ID de cliente. La ID estará disponible en el componente Edit.vue .
Esta aplicación está equipada con PHPUnit y Vitest para realizar pruebas. También aprovecha Github Actions para integración y pruebas continuas, y Storybook para desarrollar componentes de interfaz de usuario de forma aislada.
Esta aplicación está equipada con pruebas PHPUnit para todos los modelos y controladores. Las pruebas de PHP se encuentran en el directorio /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Las rutas de Laravel devuelven respuestas de inercia que dependen de la presencia de componentes de Vue. Sin los activos de front-end integrados, estos componentes no estarán disponibles, lo que provocará fallas en las pruebas que realizan solicitudes a estas rutas. Para evitar esto, debes ejecutar el servidor de desarrollo en segundo plano mientras ejecutas las pruebas .
Inicie el servidor de desarrollo:
npm run devEjecute pruebas PHPUnit con:
php artisan testEjecute una prueba específica con:
php artisan test --filter=CustomerTest Esta aplicación está equipada con Vitest (ejecutor de pruebas oficial) y Vue Test Utils (biblioteca de pruebas oficial) para probar componentes de Vue. Las pruebas deben colocarse junto al componente y denominarse 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
Puedes ejecutar las pruebas con:
npm run testVitest ejecutará las pruebas en modo reloj, para que pueda realizar cambios en el componente y ver los resultados en tiempo real.
Las pruebas de componentes están escritas en TypeScript y utilizan la API Vitest para las afirmaciones. He aquí un ejemplo:
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 también ejecutará las pruebas en cada PR de la rama main .
Esta aplicación está equipada con ESLint y configurada para analizar TypeScript. La vinculación automática de archivos JavaScript y Vue ocurre on_save .
También puedes ejecutar lint manualmente:
npm run lint Esta aplicación está equipada con Stylelint y el complemento Prettier para TailwindCSS. El linting y el formateo automáticos ocurren on_save .
El formato automático para archivos JavaScript y PHP está configurado para on_save . Consulte la configuración de VSCode y las configuraciones de extensión para obtener más información.
Ejecute manualmente Prettier y Pint con:
npm run format && composer run lintVer libro de cuentos: https://gregrickaby.github.io/vue-commerce-lab/
Esta aplicación está equipada con Storybook para desarrollar componentes de interfaz de usuario de forma aislada. Las historias deben escribirse en CSF y colocarse junto al componente en el directorio resources/js/Components . Las historias deben llamarse 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
Ejecute Storybook con:
npm run storybookConstruye un libro de cuentos con:
npm run build:storybookLa Licencia MIT (MIT). Por favor ver LICENCIA
