Apa itu Vue JS?

Mobile

Ramanda Syahputra

December 17, 2023

Vue JS adalah framework Javascript yang sangat ringan dan powerful. Apabila telah menguasai dasar HTML, CSS dan Javascript, mempelajari Vue JS akan mengembangkan kemampuan coding.

Vue JS adalah front-end JavaScript library yang digunakan untuk membuat tampilan website lebih interaktif, terutama saat mengaplikasikan SPA (Single Page Application) menggunakan Vue JS. Selain SPA, Vue JS juga dapat diintegrasikan bersamaan arsitektur MVC (Model-View-Controller).

Selain bertugas merapikan tampilan agar lebih interaktif, Vue JS terkenal mudah dihubungkan bersama dengan library lainnya. Sama seperti React JS, Vue JS juga dapat diimplementasikan pada komponen HTML dengan memanfaatkan ID, Class, dan Name.

Vue JS dikembangkan pada tahun 2013 oleh Evan You karena terinspirasi dari AngularJS yang digunakan oleh tempat kerja sebelumnya, yaitu Google. Latar belakang pengembangan Vue JS adalah karena Evan You ingin membuat sebuah library yang lebih ringan daripada AngularJS. Dan tentunya mudah diintegrasikan bersama dengan library di luar package basic.

Mengapa orang memilih Vue JS

Meskipun sudah ada FrameWork Javascript seperti Angular dan React, lalu untuk apa ada Vue JS? Berikut adalah beberapa kelebihan dari Vue JS yang perlu diperhatikan:

Vue JS dapat menggunakan JSX untuk memproses JavaScript dan komponen script lainnya, seperti HTML. Seperti yang telah kita ketahui, penggunaan HTML pada Vue JS dapat memanfaatkan ID tag pada script. Berikut contoh scriptnya:

Ukuran Library Ringkas dan Mudah Dipahami

Terkenal karena keringkasannya, Vue JS menjadi salah satu, atau bahkan, framework dengan ukuran file library yang paling kecil. Hal ini membuat Vue JS sebagai framework JS tercepat dalam merender data script ataupun media.

Karena ukuran library yang tergolong kecil, yakni antara 18-21 KB, Vue memang difokuskan hanya untuk front-end development.

Vue JS juga kompatibel dengan berbagai komponen script, terutama HTML dan CSS. Selain itu, Vue JS juga mudah dipahami dan dikembangkan pada proyek tertentu, sehingga saat ini banyak peminat yang telah meliriknya.

Dokumentasi Lengkap

Dokumentasi yang disediakan oleh Vue JS terbilang cukup lengkap untuk membantu Anda sebagai developer pemula dalam mengembangkan aplikasi web.

Berinteraksi 2 Arah

Vue JS mampu berinteraksi secara dua arah dengan memanfaatkan konsep MVM (Model, View, Model). Konsep ini memastikan bahwa setiap perubahan yang dilakukan dapat langsung berkomunikasi dengan proses yang sedang berlangsung.

Virtual Document Object Model (DOM)

Vue JS mampu membuat cache data dalam memori, yang dapat membaca perubahan dan event yang direquestkan oleh developer dan memperbaruinya pada browser. Proses ini dikenal dengan istilah virtual nodes.

Install Vue JS di Komputer

Untuk bisa memulai coding menggunakan Vue, ada beberapa syarat yang perlu dipenuhi. Harus sudah familiar atau pernah mempelajari HTML, bekerja manipulasi website menggunakan CSS, dan juga perlu belajar tentang dasar-dasar Javascript.

Peralatan yang perlu disiapkan antara lain:

Text Editor, bisa memilih menggunakan VS Code, Notepad++ atau yang lainnya
Install NodeJS dan NPM
Vue CLI
Web Browser

Langkah 1. Install Node JS

Untuk memulai project ini, silakan menginstal Node JS terlebih dahulu dengan download file installer Node JS di halaman berikut. Pilih tipe sistem operasi yang digunakan di komputer. Setelah selesai download, tinggal melanjutkan proses instalasi mengikuti instruksi yang diberikan.

Langkah 2. Cek Instalasi Node JS

Setelah melakukan instalasi Node JS, selanjutnya dicek terlebih dulu, apakah Node JS sudah berhasil terinstal atau belum. Untuk mengeceknya, silakan buka CMD atau Command Prompt.

Setelah itu ketikkan perintah berikut:

node -v

Lalu, akan menjumpai tampilan berikut bila Node JS telah berhasil diinstal.

Langkah 3. Instal Vue JS

Sebelum lanjut ke langkah instal Vue JS, silakan Anda menghapus cache CMD yang ada terlebih dahulu, dengan menggunakan perintah berikut:

npm cache clean –force

Setelah cache bersih, lanjutkan instal Vue JS dengan perintah

npm install -g @vue/cli

Untuk menginstal ini, pastikan komputer Anda telah terhubung dengan jaringan Internet. Karena perintah ini akan mengunduh langsung dari server Vue.

Langkah 4. Membuat Project Vue

Pertama, silakan masuk ke directory tempat dimana project Vue Anda tersimpan. Pada panduan, project ditempatkan di direktori C:\xampp\htdocs\vueproject.

Kedua, untuk membuat project Vue, Anda cukup jalankan perintah berikut di CMD, dan ganti myproject dengan nama direktori lembar kerja Anda.

vue create myproject

Ketiga, Anda akan diminta untuk memilih opsi instalasi Vue. Disana akan ditemui 2 pilihan, yaitu Default dan Manually. Di panduan ini, Default dipilih supaya bisa menggunakan pengaturan standar Vue. Lanjutkan dengan tekan Enter.