Tutorial Cara Membuat SPA Menggunakan Laravel dan Vue JS #1 : Installasi & Persiapan


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Tutorial Cara Membuat SPA Menggunakan Laravel dan Vue JS #1 : Installasi & Persiapan - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar mengimplementasikan SPA atau Single Page Application menggunakan Frameworl Laravel dan Vue JS.

SPA atau Single Page Application adalah sebuah teknik berpindah halaman di dalam sebuah website tanpa harus melakukan reload page.

Dan pada kesempatan kali ini nanti, kita akan mencoba mengimplementasikan dan membuat SPA tersebut dengan Framework Laravel dan juga Vue JS.

Langkah 1 - Install Composer

Langsung saja kita mulai, pertama-tama sebelum kita memulai project menggunakan Laravel, kita diharuskan untuk menginstall Composer terlebih dahulu.

Untuk cara installasi Composer, teman-teman bisa langsung mengunjungi di situs resminya di https://getcomposer.org/ dan silahkan teman-teman install sesuai sistem operasi di komputernya.

Untuk mengetahui, apakah Composer sudah terinstall, kita bisa menjalankan perintah :

composer

Jika berhasil, kurang lebih seperti ini hasilnya


Langkah 2 - Install Laravel

Setelah kita berhasil menginstall Composer, langkah selanjutnya adalah membuat project baru Laravel menggunakan Composer.

Akan tetapi sebelum kita memulainya, untuk menggunakan Laravel 6 di situs resmi laravel kita diberi tahu ada beberapa persyaratan, diantaranya :

  • PHP >= 7.2.0
  • BCMath PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Setelah semua persyaratn terpenuhi, kita bisa langsung membuat project dengan Laravel, silahkan jalankan perintah dibawah ini :

composer create-project --prefer-dist laravel/laravel laravel-vue-spa

Dari perintah di atas, kita akan membuat sebuah project Laravel baru dengan nama laravel-vue-spa.

Silahkan tunggu proses installasi projectnya sampai selesai. Setelah proses installasi selesai, sekarang kita bisa menjalankan projectnya.

cd laravel-vue-spa
php artisan serve

Jika berhasil kurang lebih tampilannya seperti berikut ini :


Langkah 3 - Install Vue JS dan Vue Router

Oke, pada tahap kali ini kita akan menginstall Vue JS, Vue Router menggunakan NPM. silahkan teman-teman jalankan perintah dibawah ini :

npm install
npm install vue vue-router

Silahkan tunggu proses installasi Vue JS dan Vue Router sampai selesai.

KESIMPULAN

Kita telah belajar bagaimana cara menginstal Laravel 6 menggunakan Composer dan belajar bagaimana cara menginstall Vue JS dan Vue Router menggunakan NPM.

Jika teman-teman memiliki pertanyaan atau kebingungan saat mencobanya, silahkan bisa berkomentar di bawah ini artikel ini.

Terima Kasih


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR