Tutorial Laravel 8 dan Vue Js 3 #3: Installasi dan Perispan Vue Js 3


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

Vue (diucapkan / vjuː /, seperti view) adalah kerangka kerja progresif untuk membangun antarmuka pengguna. Tidak seperti kerangka kerja monolitik lainnya, Vue dirancang dari bawah ke atas agar dapat diadopsi secara bertahap. Libarary inti difokuskan pada lapisan tampilan saja, dan mudah diambil dan diintegrasikan dengan library lain atau proyek yang sudah ada. Di sisi lain, Vue juga sangat mampu membuat Aplikasi SPA yang canggih bila di kombinasikan dengan library pendukung, seperti Vue Router dan lain-lain.

Vue Js pertama kali dibangun oleh Evan You pada tahun 2013, dimana saat itu beliu masih bekerja sebagai Creative Technologist di Google Creative Labs. Setelah dua tahun di Google, beliau pindah di Meteor, di mana membangun kerangka kerja JavaScript open source yaitu Meteor Js. Setelah itu beliau fokus di pengembangan Vue Js sampai sekarang.

Versi Rilis Vue Js

Versi Tanggal Rilis Judul
3.0 18 September 2020 One Piece
2.6 4 Februari 2019 Macross
2.5 13 Oktober 2017 Level E
2.4 13 Juli 2017 Kill la Kill
2.3 27 April 2017 JoJo's Bizarre Adventure
2.2 26 Februari 2017 Initial D
2.1 22 November 2016 Hunter X Hunter
2.0 30 September 2016 Ghost in the Shell
1.0 27 Oktober 2015 Evangelion
0.12 12 Juni 2015 Dragon Ball
0.11 7 November 2014 Cowboy Bebop
0.10 23 Maret 2014 Blade Runner
0.9 25 Februari 2014 Animatrix
0.8 27 Januari 2014 N/A
0.7 24 Desember 2013 N/A
0.6 8 Desember 2013 N/A

Sekarang, Vue update stabil versinya di 3.0 di bulan september tahun 2020. Dan pada kesempatan kali ini kita semua akan belajar bersama-sama membangun aplikasi serderhana menggunakan Vue Js 3.

Dan di versi 3 ini, Vue sudah menyertakan fitur baru, yaitu Composition API, Reactivity dan masih banyak lagi. Dan nanti kita bersama-sama akan belajar menggunakan fitur tersebut di dalam project yang kita kembangkan.

Langkah 1 - Installasi Node Js

Untuk menggunakan Vue, kita terlebih dahulu menginstall Node Js dan NPM. Untuk installasinya silahkan bisa mengunjungi situs resminya dan silahkan diinstall sesuai dengan sistem operasi yang digunakan.

Dan, karena kita akan menggunakan Vue CLI, maka ada syarat minimal versi Node Js yang digunakan. Kurang lebih info dari dokumentasi resminya seperti ini :

Persyaratan Versi Node Vue CLI 4.x membutuhkan Node.js versi 8.9 atau lebih tinggi (disarankan v10 +).

Untuk memastikan apakah Node Js sudah terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :

node -v
npm -v

Langkah 2 - Installasi Vue CLI

Vue CLI merupakan standart tool yang digunakan untuk proses pengembangan aplikasi Vue js agar lebih mudah dan maintenable. Silahkan jalankan perintah di bawah ini untuk menginstall Vue CLI secara global di dalam komputer.

npm install -g @vue/cli

Setelah installasi selesai, sekarang kita bisa memerika versi Vue CLI yang kita gunakan dengan perintah seperti berikut ini :

vue --version

Langkah 3 - Membuat Project Vue Js Baru

Setelah Vue CLI berhasil terinstall, sekarang kita bisa melakukan scaffolding untuk membuat project Vue secara lebih cepat dan efisien.

Sekarang, silahkan masuk di dalam folder yang akan teman-teman buat menyimpan project-nya dan jalankan perintah di bawah ini :

vue create crud-vue-3

Perintah di atas, digunakan untuk membuat project Vue baru dengan nama crud-vue-3, jika muncul pilihan preset, silahkan pilih Default (Vue 3 Preview) ([Vue 3] babel eslint).

kemudian tunggu proses installasinya sampai selesai.

Langkah 4 - Menjalankan Project Vue Js

Setelah proses installasi selesai, sekarang kita akan belajar menjalankan project Vue tersebut. Silahkan jalankan perintah berikut ini :

cd crud-vue-3
npm run serve

Jika berhasil, maka project Vue kita akan di jalankan di dalam port 8080, kita bisa membukanya di http://localhost:8080.

Sampai disini belajar kita tentang installasi dan persiapan di Vue Js 3, di artikel selanjutnya kita bersama-sama akan belajar menginstall Vue Router, Axios dan Bootstrap.

Terima Kasih.


EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue

EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire


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