vue commerce lab
1.0.0
이 저장소에는 Laravel을 학습하고 구현하기 위한 실용적인 애플리케이션 역할을 하는 실험적인 전자상거래 대시보드가 있습니다. 저는 이것을 Laravel Breeze로 스캐폴딩하고 로컬 개발을 위해 Laravel Valet을 사용합니다.
route() 함수를 통해 Laravel의 명명된 서버 측 경로를 노출하여 Vue 구성 요소에서 경로를 쉽게 생성할 수 있습니다.이 프로젝트는 이러한 기술을 사용하여 모든 기능을 갖춘 웹 애플리케이션을 개발하는 데 관심이 있는 모든 사람에게 포괄적인 예를 제공합니다.
저장소를 Valet 사이트 디렉터리에 복제합니다.
git clone [email protected]:gregrickaby/vue-commerce-lab.git종속성을 설치합니다.
composer install && npm install .env 파일을 생성합니다:
cp .env.example .env database.sqlite 파일을 생성합니다:
touch database/database.sqlite애플리케이션 키 생성:
php artisan key:generate마이그레이션을 실행합니다.
php artisan migrate:fresh데이터베이스를 시드합니다.
php artisan db:seedPHP 버전을 8.3으로 설정합니다.
valet isolate [email protected]사이트 보안:
valet secure개발 서버를 시작합니다:
npm run devhttps://vue-commerce-lab.test 사이트를 방문하고 다음 자격 증명으로 로그인하십시오.
password 모델은 app/Models 디렉터리에 있습니다. 각 모델에는 database/factories 및 database/seeders 디렉터리에 해당 팩토리와 시더가 있습니다.
모델은 애플리케이션의 데이터를 관리하는 역할을 담당합니다. 컨트롤러로부터 입력을 받아 검증한 다음 데이터베이스로 보냅니다.
이 애플리케이션은 Vue 및 Inertia를 사용하므로 보기는 resources/js/pages 디렉터리에 있고 web.php 파일을 통해 라우팅됩니다.
뷰는 사용자에게 데이터를 표시하는 역할을 담당합니다. 컨트롤러로부터 데이터를 수신한 다음 이를 브라우저에 렌더링합니다.
컨트롤러는 app/Http/Controllers 디렉터리에 있습니다. 각 컨트롤러에는 tests/Feature 디렉터리에 해당 테스트가 있습니다.
컨트롤러는 요청을 처리하고 응답을 반환하는 일을 담당합니다. 사용자로부터 입력을 받아 검증한 다음 모델에 전달합니다.
경로는 routes 디렉터리에 있습니다. web.php 파일에는 애플리케이션에 대한 모든 경로가 포함되어 있습니다.
Vue.js 파일은 resources/js 디렉토리에 있습니다.
디렉토리 구조는 표준 Laravel 규칙을 따르며 TypeScript 인터페이스 및 유형을 위한 types 디렉토리와 유틸리티 및 도우미 기능을 위한 utils 디렉토리를 추가합니다.
├── 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
주위에 {} 가 있는 폴더는 동적 경로입니다. 예를 들어 /Pages/Customers/{customers}/Edit.vue 는 모든 고객 ID와 일치하는 동적 경로입니다. 그러면 Edit.vue 구성 요소에서 ID를 사용할 수 있습니다.
이 애플리케이션은 테스트를 위해 PHPUnit과 Vitest를 모두 갖추고 있습니다. 또한 지속적인 통합 및 테스트를 위해 Github Actions를 활용하고 UI 구성요소를 독립적으로 개발하기 위해 Storybook을 활용합니다.
이 애플리케이션에는 모든 모델과 컨트롤러에 대한 PHPUnit 테스트가 탑재되어 있습니다. PHP 테스트는 /tests 디렉토리에 있습니다:
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Laravel 경로는 Vue 구성 요소의 존재 여부에 따라 관성 응답을 반환합니다. 구축된 프런트 엔드 자산이 없으면 이러한 구성 요소를 사용할 수 없으므로 이러한 경로에 요청하는 테스트가 실패하게 됩니다. 이를 방지하려면 테스트를 실행하는 동안 백그라운드에서 개발 서버를 실행해야 합니다 .
개발 서버를 시작합니다.
npm run dev다음을 사용하여 PHPUnit 테스트를 실행하세요.
php artisan test다음을 사용하여 특정 테스트를 실행하세요.
php artisan test --filter=CustomerTest 이 애플리케이션에는 Vue 구성 요소를 테스트하기 위한 Vitest(공식 테스트 실행기)와 Vue Test Utils(공식 테스트 라이브러리)가 모두 포함되어 있습니다. 테스트는 구성 요소 옆에 배치되고 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
다음을 사용하여 테스트를 실행할 수 있습니다.
npm run testVitest는 시계 모드에서 테스트를 실행하므로 구성 요소를 변경하고 결과를 실시간으로 확인할 수 있습니다.
구성 요소 테스트는 TypeScript로 작성되었으며 어설션을 위해 Vitest API를 사용합니다. 예는 다음과 같습니다.
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는 또한 main 브랜치에 대한 모든 PR에 대한 테스트를 실행합니다.
이 애플리케이션에는 ESLint가 탑재되어 있으며 TypeScript를 구문 분석하도록 구성되어 있습니다. 자동 Linting JavaScript 및 Vue 파일은 on_save 발생합니다.
Lint를 수동으로 실행할 수도 있습니다.
npm run lint 이 애플리케이션에는 TailwindCSS용 Stylelint 및 Prettier 플러그인이 포함되어 있습니다. 자동 린트 및 서식 지정은 on_save 발생합니다.
on_save 에 대해 JavaScript 및 PHP 파일 모두에 대한 자동 형식이 구성됩니다. 자세한 내용은 VSCode 설정 및 확장 구성을 참조하세요.
다음을 사용하여 Prettier 및 Pint를 수동으로 실행하세요.
npm run format && composer run lint스토리북 보기: https://gregrickaby.github.io/vue-commerce-lab/
이 애플리케이션에는 UI 구성 요소를 독립적으로 개발하기 위한 Storybook이 포함되어 있습니다. 스토리는 CSF로 작성되어야 하며 resources/js/Components 디렉터리의 구성 요소 옆에 배치되어야 합니다. 스토리 이름은 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
다음을 사용하여 Storybook을 실행하세요.
npm run storybook다음을 사용하여 스토리북을 구축하세요.
npm run build:storybookMIT 라이센스(MIT). 라이센스를 참조하십시오
