vue commerce lab
1.0.0
该存储库包含一个实验性电子商务仪表板，可作为学习和实现 Laravel 的实际应用程序。我使用 Laravel Breeze 搭建了这个框架，并使用 Laravel Valet 进行本地开发。
route()函数公开Laravel的命名服务器端路由，允许在Vue组件中轻松生成路由。对于任何有兴趣使用这些技术开发功能齐全的 Web 应用程序的人来说，该项目可以作为一个综合示例。
克隆存储库（到您的 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目录中都有一个相应的工厂和seeder。
模型负责管理应用程序的数据。它们接收来自控制器的输入，验证它，然后将其发送到数据库。
该应用程序使用 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 customers}/Edit.vue 是一个动态路由，将匹配任何客户 ID。然后，该 ID 可在Edit.vue组件中使用。
该应用程序配备了 PHPUnit 和 Vitest 进行测试。它还利用 Github Actions 进行持续集成和测试，并利用 Storybook 来独立开发 UI 组件。
该应用程序配备了适用于所有模型和控制器的 PHPUnit 测试。 PHP 测试位于/tests目录中：
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Laravel 路由返回依赖于 Vue 组件是否存在的 Inertia 响应。如果没有构建的前端资产，这些组件将不可用，从而导致向这些路由发出请求的测试失败。为了避免这种情况，您必须在运行测试时在后台运行开发服务器。
启动开发服务器：
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 还将对main分支的每个 PR 运行测试。
该应用程序配备了 ESLint 并配置为解析 TypeScript。自动 linting JavaScript 和 Vue 文件发生在on_save上。
您还可以手动运行 lint：
npm run lint该应用程序配备了 Stylelint 和 TailwindCSS 的 Prettier 插件。自动检查和格式化发生在on_save上。
JavaScript 和 PHP 文件的自动格式化是为on_save配置的。请参阅 VSCode 设置和扩展配置以获取更多信息。
使用以下命令手动运行 Prettier 和 Pint：
npm run format && composer run lint查看故事书：https://gregrickaby.github.io/vue-commerce-lab/
该应用程序配备了 Storybook，用于独立开发 UI 组件。故事必须用 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)。请参阅许可证
