vue commerce lab
1.0.0
В этом репозитории находится экспериментальная панель электронной коммерции, которая служит практическим приложением для изучения и внедрения Laravel. Я создал это с помощью Laravel Breeze и использую Laravel Valet для локальной разработки.
route() , что позволяет легко генерировать маршруты в компонентах 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:seedУстановите версию PHP 8.3:
valet isolate [email protected]Защитите сайт:
valet secureЗапустите сервер разработки:
npm run devПосетите сайт: https://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, с добавлением каталога types для интерфейсов и типов TypeScript, а также каталога 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 — это динамический маршрут, который будет соответствовать любому идентификатору клиента. После этого идентификатор будет доступен в компоненте Edit.vue .
Это приложение оснащено PHPUnit и Vitest для тестирования. Он также использует Github Actions для непрерывной интеграции и тестирования и Storybook для изолированной разработки компонентов пользовательского интерфейса.
Это приложение оснащено тестами PHPUnit для всех моделей и контроллеров. PHP-тесты расположены в каталоге /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Маршруты Laravel возвращают ответы Inertia, которые зависят от наличия компонентов Vue. Без встроенных внешних ресурсов эти компоненты будут недоступны, что приведет к сбоям в тестах, выполняющих запросы к этим маршрутам. Чтобы этого избежать, во время выполнения тестов необходимо запускать сервер разработки в фоновом режиме .
Запустите сервер разработки:
npm run devЗапустите тесты PHPUnit с помощью:
php artisan testЗапустите конкретный тест с помощью:
php artisan test --filter=CustomerTest Это приложение оснащено Vitest (официальным средством запуска тестов) и Vue Test Utils (официальной библиотекой тестирования) для тестирования компонентов Vue. Тесты должны быть размещены рядом с компонентом и названы 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 также будет запускать тесты для каждого PR в main ветке.
Это приложение оснащено ESLint и настроено для анализа TypeScript. Автоматическая проверка файлов JavaScript и Vue происходит on_save .
Вы также можете запустить lint вручную:
npm run lint Это приложение оснащено Stylelint и плагином Prettier для TailwindCSS. Автоматическая проверка и форматирование происходит on_save .
Для on_save настроено автоматическое форматирование файлов JavaScript и PHP. Для получения дополнительной информации см. настройки VSCode и конфигурации расширений.
Вручную запустите Prettier и Pint с помощью:
npm run format && composer run lintПосмотреть сборник рассказов: https://gregrickaby.github.io/vue-commerce-lab/
Это приложение оснащено 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:storybookЛицензия MIT (MIT). Пожалуйста, ознакомьтесь с ЛИЦЕНЗИЕЙ
