spa starter kit

Kit Pemula Aplikasi Satu Halaman Codecast

Starter kit Aplikasi Halaman Tunggal yang dibangun di atas Vue.js dan Laravel.

Paket ini berisi dua proyek terpisah yang bertindak sebagai titik awal untuk Aplikasi Satu Halaman: proyek Vue.js (dibuat dengan template vue-cli + webpack) dan proyek Laravel 5.3.

Itu bukan hanya proyek yang baru dibuat tetapi aplikasi yang berfungsi penuh yang dapat dimodifikasi dan diperluas untuk menjadi aplikasi Anda sendiri.

Demo

Demo langsung dapat ditemukan di https://spa.codecasts.rocks/.

Fitur

1. Sisi klien
   • Proyek Vue.js 2.0 dibuat dengan template vue-cli + webpack
   • Manajemen negara terpusat dengan Vuex
   • Manajemen rute dengan Vue-router
   • Otentikasi dengan JWT
   • Biarkan pengguna tetap masuk menggunakan informasi yang disimpan secara lokal
   • Permintaan HTTP dengan Axios
   • ESLint dengan prasetel AirBNB
   • Pagination terintegrasi dengan LongAwarePaginator Laravel
   • Peringatan dan Peringatan Konfirmasi disediakan oleh SweetAlert
2. Sisi server
   • Laravel 5.3
   • Otentikasi dengan JWT
   • Fraktal
   • Layanan web RESTful dengan Dingo (direncanakan)

Prasyarat

Pastikan Anda telah menginstal Node dan Yarn (versi terbaru) serta PHP 7 dan MySQL .

Instalasi

Kloning

Perintah-perintah ini akan mengunduh repositori dan menyiapkannya untuk Anda.

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

Pengaturan

1. Sisi klien - ini adalah proyek Vue.js yang dibuat dengan vue-cli
   • Dengan cd client && yarn && yarn run dev .
2. Sisi server - ini adalah proyek Laravel 5.3
   • Dengan Terminal:
     • Arahkan ke folder layanan web dan kemudian:
     • composer install untuk menginstal Laravel dan paket pihak ketiga
     • touch database/database.sqlite untuk membuat file database kosong
     • cp .env.example .env untuk mengonfigurasi instalasi
     • php artisan key:generate untuk menghasilkan kunci unik untuk proyek tersebut
     • php artisan jwt:secret untuk menghasilkan kunci unik untuk proyek tersebut
     • php artisan migrate untuk membuat semua tabel
     • php artisan db:seed untuk mengisi tabel dengan data palsu
     • php artisan serve untuk melayani aplikasi di localhost:8000

Penggunaan

1. Sisi klien
   • Aplikasi Anda akan tersedia di http://localhost:8080
2. Sisi server
   • Titik akhir API adalah http:// localhost:8000/api

Pengujian

Arahkan ke folder layanan web dan jalankan skrip pengujian komposer

$ composer test 

Hal-hal yang layak disebutkan

1. Penanganan kesalahan dilakukan secara global dengan memanfaatkan interseptor Axios. Namun Anda masih dapat melakukan kesalahan .catch() di dalam komponen untuk melakukan tindakan yang terkait dengan cakupan tersebut. Lihat /client/src/plugins/http.js;

2. Dengan cara yang sama, pesan kesalahan berada dalam satu komponen (/client/src/modules/general/alerts.vue) dan visibilitasnya dikontrol oleh properti Vuex. Jadi untuk menampilkan/menyembunyikan pesan, yang perlu dilakukan hanyalah mengirimkan tindakan Vuex dari dalam komponen apa pun;

3. Spinner yang ditampilkan selama permintaan server (lihat kanan atas di dekat identifikasi pengguna) juga dikontrol oleh properti Vuex. Tata cara menampilkan/menyembunyikannya sama seperti yang diuraikan pada angka 2 di atas;

4. rute dan modul Vuex berada dekat dengan modul tempat mereka bekerja. Selalu cari rute.js dan store.js di dalam direktori modul. Lihat /client/src/modules/categories;

5. Penting : Proyek Laravel yang ditemukan di direktori layanan web telah dimodifikasi selain menambahkan rute dan pengontrol. Misalnya: webservice/app/Exceptions/Handler.php telah dimodifikasi dari versi aslinya untuk mengembalikan semua pengecualian ke klien, tidak hanya HttpExceptions. Perubahan lain juga terjadi. Jadi rekomendasi kami adalah untuk selalu menggunakan proyek ini untuk membuat proyek Anda sendiri, daripada menyalin pengontrol dan rute ke proyek baru.

Berkontribusi

1. Garpu!
2. Buat cabang fitur Anda dari pengembangan : git checkout -b feature/my-new-feature
3. Tulis kode Anda. Komentari kode Anda.
4. Komit perubahan Anda: git commit -am 'Add some feature'
5. Dorong ke cabang: git push origin feature/my-new-feature
6. Kirim permintaan tarik untuk mengembangkan cabang :D

Kredit

Fábio Vedovelli dan kontributor yang berdedikasi.

Lisensi

Berlisensi di bawah lisensi MIT.