Halo teman-teman semuanya pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat sebuah project Vue Js baru, dimana project ini akan kita gunakan untuk menampilkan dan mengolah Restful API yang sudah kita buat sebelumnya di CodeIgniter 4.
Vue JS merupakan sebuah progressive framework yang dibangun untuk membuat tampilan website agar interaktif. Untuk mempelajari Vue JS teman-teman sudah harus mengerti dasar-dasar dari HTML, CSS dan JavaScript.
Langkah 1 - Installasi Node Js
Sebelum kita memulai membuat project baru di Vue Js kita harus menginstall Node Js terlebih daulu, karena nanti kita akan menggunakan NPM untuk menginstall beberapa dependensi di Vue Js.
NPM ini adalah singakatan dari Node Package Manager, yang mana NPM ini adalah sebuah tool yang bisa kita gunakan untuk mengunduh dependensi-dependensi Node Module dengan mudah. Dan salah satunya dalah Vue CLI ini.
Vue CLI sendiri merupakan sebuah Tool untuk mempermudah kita dalam proses development di Vue JS. Dan nanti kita juga akan membuat project baru menggunakan Vue CLI.
Sekarang, silahkan teman-teman install Node JS melalui situs resminya di https://nodejs.org/en/download/ dan silahkan di sesuaikan dengan sistem operasi masing-masing.
Untuk mengetahui, apakah Node JS sudah berhasil terinstall dikomputer kita, kita bisa menjalankan perintah dibawah ini di terminal atau CMD.
node -v
npm -v
Langkah 2 - Installasi Vue CLI
Oke, sekarang kita akan menginstall Vue CLI secara global di laptop atau komputer kita, silahkan teman-teman jalankan perintah dibawah ini :
npm install -g @vue/cli @vue/cli-service-global
Silahkan tunggu installasi Vue CLI sampai dengan selesai. Disini teman-teman harus menggunakan koneksi internet.
Langkah 3 - Membuat Project Baru Vue Js dengan Vue CLI
vue create vue-codeigniter
Perintah di atas akan membuat project Vue Js baru dengan nama vue-codeigniter dan nanti silahkan teman-teman pilih preset yang akan kita gunakan dalam mengembangkan project ini.
Silahkan pilih default (babel, eslint) dan silahkan tunggu sampai proses installasinya sampai selesai.
Langkah 4 - Menjalankan Project Vue Js
Setelah kita berhasil membuat project Vue Js baru, sekarang kita akan mencoba menjalankan project tersebut. Langsung saja kita mulai.
cd vue-codeigniter
npm run serve
Secara default project Vue Js kita akan menggunakan port 8080 akan tetapi jika sebelumnya teman-teman menjalankan serve CodeIgniter maka port ini sudah digunakan oleh server CodeIgniter tersebut, maka secara otomatis Vue Js akan menjalankan projectnya dengan port 8081, silahkan teman-teman buka di http://localhost:8081 maka kurang lebih seperti berikut ini :
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter