Tutorial CRUD CodeIgniter 4 & Vue JS #4 - Installasi Vue Js


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial CRUD CodeIgniter 4 & Vue JS #4 - Installasi Vue Js

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


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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