vue commerce lab
1.0.0
Este repositório abriga um painel experimental de comércio eletrônico que serve como uma aplicação prática para aprender e implementar o Laravel. Eu criei isso com o Laravel Breeze e usei o Laravel Valet para desenvolvimento local.
route() , permitindo fácil geração de rotas em componentes Vue.Este projeto serve como um exemplo abrangente para qualquer pessoa interessada em desenvolver aplicações web completas usando essas tecnologias.
Clone o repositório (no diretório de sites do Valet):
git clone [email protected]:gregrickaby/vue-commerce-lab.gitInstale dependências:
composer install && npm install Crie o arquivo .env :
cp .env.example .env Crie o arquivo database.sqlite :
touch database/database.sqliteGere a chave do aplicativo:
php artisan key:generateExecute uma migração:
php artisan migrate:freshPropague o banco de dados:
php artisan db:seedDefina a versão do PHP para 8.3:
valet isolate [email protected]Proteja o site:
valet secureInicie o servidor de desenvolvimento:
npm run devVisite o site: https://vue-commerce-lab.test e faça login com as seguintes credenciais:
password Os modelos estão localizados no diretório app/Models . Cada modelo possui uma fábrica e um semeador correspondentes nos diretórios database/factories e database/seeders .
Os modelos são responsáveis por gerenciar os dados da aplicação. Eles recebem informações do controlador, validam-nas e depois as enviam para o banco de dados.
Este aplicativo usa Vue e Inertia, portanto as visualizações estão no diretório resources/js/pages e roteadas através do arquivo web.php.
As visualizações são responsáveis por exibir os dados ao usuário. Eles recebem dados do controlador e os renderizam no navegador.
Os controladores estão localizados no diretório app/Http/Controllers . Cada controlador possui um teste correspondente no diretório tests/Feature
Os controladores são responsáveis por lidar com solicitações e retornar respostas. Eles recebem informações do usuário, validam e depois passam para o modelo.
As rotas estão localizadas no diretório routes . O arquivo web.php contém todas as rotas da aplicação.
Os arquivos Vue.js estão localizados no diretório resources/js .
A estrutura de diretórios segue as convenções padrão do Laravel, com a adição de um diretório types para interfaces e tipos TypeScript e um diretório utils para funções utilitárias e auxiliares.
├── 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
Pastas com um {} ao redor são rotas dinâmicas. Por exemplo, /Pages/Customers/{customers}/Edit.vue é uma rota dinâmica que corresponderá a qualquer ID de cliente. O ID fica então disponível no componente Edit.vue .
Este aplicativo está equipado com PHPUnit e Vitest para teste. Ele também aproveita o Github Actions para integração e testes contínuos, e o Storybook para desenvolver componentes de UI isoladamente.
Este aplicativo está equipado com testes PHPUnit para todos os modelos e controladores. Os testes PHP estão localizados no diretório /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
As rotas Laravel retornam respostas de inércia que dependem da presença de componentes Vue. Sem os ativos front-end construídos, esses componentes não estarão disponíveis, levando a falhas nos testes que fazem solicitações a essas rotas. Para evitar isso, você deve executar o servidor de desenvolvimento em segundo plano enquanto executa os testes .
Inicie o servidor de desenvolvimento:
npm run devExecute testes PHPUnit com:
php artisan testExecute um teste específico com:
php artisan test --filter=CustomerTest Este aplicativo está equipado com Vitest (executor de teste oficial) e Vue Test Utils (biblioteca de teste oficial) para testar componentes Vue. Os testes devem ser colocados próximos ao componente e denominados 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
Você pode executar os testes com:
npm run testO Vitest executará os testes em modo watch, para que você possa fazer alterações no componente e ver os resultados em tempo real.
Os testes de componentes são escritos em TypeScript e usam a API Vitest para asserções. Aqui está um exemplo:
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 ( )
} )
} ) O Github Actions também executará os testes em cada PR para o branch main .
Este aplicativo está equipado com ESLint e configurado para analisar TypeScript. A linting automática de arquivos JavaScript e Vue acontece on_save .
Você também pode executar o lint manualmente:
npm run lint Este aplicativo está equipado com Stylelint e o plugin Prettier para TailwindCSS. Linting e formatação automática acontecem on_save .
A formatação automática para arquivos JavaScript e PHP é configurada para on_save . Consulte as configurações do VSCode e as configurações de extensão para obter mais informações.
Execute manualmente o Prettier e o Pint com:
npm run format && composer run lintVeja o livro de histórias: https://gregrickaby.github.io/vue-commerce-lab/
Este aplicativo está equipado com Storybook para desenvolver componentes de UI isoladamente. As histórias devem ser escritas em CSF, colocadas ao lado do componente no diretório resources/js/Components . As histórias devem ser nomeadas 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
Execute o Storybook com:
npm run storybookCrie um livro de histórias com:
npm run build:storybookA licença MIT (MIT). Por favor veja LICENÇA
