vue commerce lab
1.0.0
Repositori ini menampung dasbor E-commerce eksperimental yang berfungsi sebagai aplikasi praktis untuk mempelajari dan mengimplementasikan Laravel. Saya merancang ini dengan Laravel Breeze dan menggunakan Laravel Valet untuk pengembangan lokal.
route() global, memungkinkan pembuatan rute dengan mudah dalam komponen Vue.Proyek ini berfungsi sebagai contoh komprehensif bagi siapa pun yang tertarik untuk mengembangkan aplikasi web berfitur lengkap menggunakan teknologi ini.
Kloning repositori (ke dalam direktori situs Valet Anda):
git clone [email protected]:gregrickaby/vue-commerce-lab.gitInstal dependensi:
composer install && npm install Buat file .env :
cp .env.example .env Buat file database.sqlite :
touch database/database.sqliteHasilkan kunci aplikasi:
php artisan key:generateJalankan migrasi:
php artisan migrate:freshBenih database:
php artisan db:seedAtur versi PHP ke 8.3:
valet isolate [email protected]Amankan situs:
valet secureMulai server pengembangan:
npm run devKunjungi situs: https://vue-commerce-lab.test dan login dengan kredensial berikut:
password Model terletak di direktori app/Models . Setiap model memiliki pabrik dan seeder yang sesuai di database/factories dan direktori database/seeders .
Model bertanggung jawab untuk mengelola data aplikasi. Mereka menerima masukan dari pengontrol, memvalidasinya, lalu mengirimkannya ke database.
Aplikasi ini menggunakan Vue dan Inertia, sehingga tampilan berada di direktori resources/js/pages dan dialihkan melalui file web.php.
Tampilan bertanggung jawab untuk menampilkan data kepada pengguna. Mereka menerima data dari pengontrol, lalu menyajikannya ke browser.
Pengontrol terletak di direktori app/Http/Controllers . Setiap pengontrol memiliki tes yang sesuai di direktori tests/Feature
Pengontrol bertanggung jawab untuk menangani permintaan dan mengembalikan tanggapan. Mereka menerima masukan dari pengguna, memvalidasinya, lalu meneruskannya ke model.
Rute terletak di direktori routes . File web.php berisi semua rute untuk aplikasi.
File Vue.js terletak di direktori resources/js .
Struktur direktori mengikuti konvensi standar Laravel, dengan penambahan direktori types untuk antarmuka dan tipe TypeScript, dan direktori utils untuk fungsi utilitas dan pembantu.
├── 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
Folder dengan {} di sekelilingnya adalah rute dinamis. Misalnya, /Pages/Customers/{customers}/Edit.vue adalah rute dinamis yang akan cocok dengan ID pelanggan mana pun. ID tersebut kemudian tersedia di komponen Edit.vue .
Aplikasi ini dilengkapi dengan PHPUnit dan Vitest untuk pengujian. Ini juga memanfaatkan Github Actions untuk integrasi dan pengujian berkelanjutan, dan Storybook untuk mengembangkan komponen UI secara terpisah.
Aplikasi ini dilengkapi dengan tes PHPUnit untuk semua model dan pengontrol. Tes PHP terletak di direktori /tests :
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Rute Laravel mengembalikan respons Inersia yang bergantung pada keberadaan komponen Vue. Tanpa aset front-end yang dibangun, komponen-komponen ini tidak akan tersedia, sehingga menyebabkan kegagalan dalam pengujian yang membuat permintaan ke rute-rute ini. Untuk menghindari hal ini, Anda harus menjalankan server pengembangan di latar belakang saat menjalankan pengujian .
Mulai server pengembangan:
npm run devJalankan tes PHPUnit dengan:
php artisan testJalankan tes khusus dengan:
php artisan test --filter=CustomerTest Aplikasi ini dilengkapi dengan Vitest (test runner resmi) dan Vue Test Utils (library pengujian resmi) untuk menguji komponen Vue. Pengujian harus ditempatkan di sebelah komponen dan diberi nama 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
Anda dapat menjalankan tes dengan:
npm run testVitest akan menjalankan pengujian dalam mode jam tangan, sehingga Anda dapat membuat perubahan pada komponen dan melihat hasilnya secara real-time.
Pengujian komponen ditulis dalam TypeScript dan menggunakan Vitest API untuk pernyataan. Berikut ini contohnya:
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 juga akan menjalankan pengujian pada setiap PR hingga cabang main .
Aplikasi ini dilengkapi dengan ESLint dan dikonfigurasi untuk parsing TypeScript. Linting otomatis file JavaScript dan Vue terjadi on_save .
Anda juga dapat menjalankan lint secara manual:
npm run lint Aplikasi ini dilengkapi dengan Stylelint dan plugin Prettier untuk TailwindCSS. Linting dan pemformatan otomatis terjadi on_save .
Pemformatan otomatis untuk file JavaScript dan PHP dikonfigurasi untuk on_save . Silakan lihat pengaturan VSCode dan konfigurasi ekstensi untuk informasi lebih lanjut.
Jalankan Prettier dan Pint secara manual dengan:
npm run format && composer run lintLihat Buku Cerita: https://gregrickaby.github.io/vue-commerce-lab/
Aplikasi ini dilengkapi dengan Storybook untuk mengembangkan komponen UI secara terpisah. Cerita harus ditulis dalam CSF, ditempatkan di sebelah komponen di direktori resources/js/Components . Cerita harus diberi nama 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
Jalankan Buku Cerita dengan:
npm run storybookBangun Buku Cerita dengan:
npm run build:storybookLisensi MIT (MIT). Silakan lihat LISENSI
