Table Of Contens

• Langkah 1 - Installasi Node Js
• Langkah 2 - Installasi Vue CLI
• Langkah 3 - Membuat Project Vue Js Baru
• Langkah 4 - Menjalankan Project Vue Js

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

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

---

Artikel ini dibaca sebanyak 17.184 kali