[Terlengkap] Pengertian dan Cara Install Vue JS

 

Saat ini ada banyak berbagai framework yang digunakan dalam pemrograman aplikasi web. Vue JS adalah salah satu framework pemrograman yang memiliki performa tinggi. Agar Anda bisa mengenalnya lebih dekat, artikel ini akan menjelaskan apa itu Vue JS.

Tidak hanya itu, Anda juga akan belajar cara install Vue JS di Windows, cara menggunakan Vue Js, keunggulan Vue JS, dan Fitur Vue JS.

Apa itu Vue JS?

Vue JS adalah library JavaScript yang digunakan untuk membuat tampilan interface sebuah website yang interaktif.  Pada dasarnya, fitur utama dari Vue JS lebih fokus pada rendering dan komposisi element. Namun, untuk membuat aplikasi yang lebih kompleks, Anda akan membutuhkan routing, state manajemen, template, build-tool, dan lain-lain. 

Library Vue JS hanya fokus pada view layer. Framework ini  sangat mudah diimplementasikan dan diintegrasikan dengan library lain atau dengan project yang sudah Anda buat sebelumnya. Vue JS menggunakan id, name atau class dari suatu component html.

Sebagai sebuah framework, bisa dikatakan perkembangan Vue.js cukup pesat. Bahkan, saat ini framework ini sudah digunakan banyak perusahaan besar seperti Google dan Adobe. Padahal, framework ini sendiri masih cukup baru. 

Kehadiran Vue JS memberikan alternatif framework yang lebih ringan dibandingkan yang lainnya. Untuk mempelajari Vue JS ini setidaknya Anda sudah mengerti dasar-dasar HTML, CSS dan juga JavaScript.

Cara Install Vue JS di Windows

Hal pertama yang harus Anda lakukan sebelum install Vue JS adalah menginstal Node.js. Setelah Anda menginstal Node.js, Anda akan bertemu dengan yang namanya NPM.

NPM adalah sebuah tool untuk mengatur package Java Script. NPM diibaratkan sebagai Composer versi Node.js. NPM ini sangat dibutuhkan sebelum Anda menginstal Vue JS. 

Untuk lebih jelasnya, berikut ini adalah langkah-langkah Install Vue JS di Windows.

Langkah 1: Download dan Install Node JS

Untuk mengunduh file installer Node JS Anda bisa klik disini. Sesuaikan tipe sistem operasi Windows Anda apakah menggunakan 64bit atau 32bit. Klik salah satu dan tunggu hingga proses download selesai.

Setelah proses download selesai, buka setup instalasi Node JS dan ikuti instruksi instalasinya. Tunggu hingga proses instalasi selesai.

Langkah 2: Cek Instalasi Node JS

Selanjutnya, cek apakah instalasi Node JS Anda berhasil atau tidak. Caranya dengan menggunakan cmd. Buka cmd dengan cara klik tombol windows lalu ketik cmd pada menu pencarian. Klik kanan pada aplikasi Command Prompt lalu pilih Run as Administrator. Seperti contoh gambar di bawah ini.

Kemudian, masukkan perintah berikut untuk memastikan proses instalasi Node JS Anda berhasil.

node -v

Maka output dari perintah di atas akan seperti gambar di bawah ini:

Langkah 3: Install Vue JS

Untuk menghindari terjadinya error saat proses instalasi Vue JS, bersihkan cache pada cmd menggunakan perintah berikut:

npm cache clean --force

Output dari perintah di atas akan menampilkan seperti gambar di bawah ini.

Selanjutnya install Vue JS menggunakan perintah berikut. 

npm install -g @vue/cli

Pastikan saat proses install Anda terhubung ke dalam jaringan internet. Karena, proses install membutuhkan download file dari resource Vue JS yang ada di Node JS.

Tunggu hingga proses instalasi selesai, seperti contoh gambar di bawah ini:

Langkah 4: Buat Project Vue JS

Setelah Anda selesai melakukan instalasi Vue JS, tidak lengkap rasanya apabila Anda tidak langsung mencoba langsung untuk membuat project menggunakan Vue JS.

Pertama, masuk ke direktori tempat Anda nanti akan menyimpan project Vue JS. Pada panduan ini menggunakan direktori Local Disk: D. 

Selanjutnya, untuk membuat project baru Vue JS Anda cukup jalankan perintah berikut ke dalam Command Prompt Anda. myproject adalah nama folder tempat menyimpan project Vue JS, Anda juga bisa menggunakan nama lain.

vue create myproject

Kemudian, Anda akan diminta untuk memilih opsi instalasi pada Vue CLI. Terdapat dua pilihan yaitu default dan manually. Pada panduan ini kami menggunakan pilihan default. Karena untuk menyesuaikan pengaturan project sesuai dengan Vue JS. Lalu tekan ENTER.

Setelah itu proses pembuatan project akan berjalan. Anda perlu tunggu hingga proses ini selesai. Apabila proses pembuatan project berhasil akan muncul pesan Successfully created project “myproject”.

Selanjutnya Anda perlu masuk ke dalam direktori project. Gunakan perintah yang telah diberikan saat proses instalasi selesai. Pada panduan ini menggunakan perintah.

cd myprojects

Setelah Anda masuk ke dalam direktori project, jalankan Vue JS menggunakan perintah berikut:

npm run serve

Perintah diatas akan menghasilkan output seperti gambar di bawah ini. 

Yang terakhir buka browser Anda dan akses salah satu dari IP / localhost yang ada pada gambar di atas. Maka Anda akan mendapatkan tampilan halaman dari Vue JS.

Setelah itu Anda bisa melakukan proses develop front-end dari website atau aplikasi.

Belajar Vue JS

Di bagian ini, Anda akan belajar Vue JS, mulai dari mengenal fitur-fitur yang ada di Vue JS hingga belajar cara penulisan Vue JS sederhana.

Fitur Vue JS

Saat ini, Vue JS menyediakan banyak fitur yang dapat membantu developer untuk mengembangkan website. Fitur ini cukup penting untuk Anda ketahui. Apa saja fitur-fiturnya?

1. Computed Properties

Fitur ini adalah fitur yang penting dari Vue JS. Fitur computed properties sangat membantu Anda untuk melihat perubahan yang terjadi pada elemen user interface, tanpa harus melakukan penambahan kode.

2. Event Handling

Event handling (v-on) adalah atribut yang ditambahkan ke elemen DOM untuk event Vue JS. Dengan bantuan event handling, Anda bisa membuat website menjadi lebih interaktif.

3. Components

Fitur components ini sangat penting dalam Vue JS, karena dapat digunakan untuk membuat elemen kustom pada HTML. Elemen kustom ini juga  dapat digunakan secara berulang-ulang.

4. Data Binding

Data binding pada Vue JS digunakan untuk memanipulasi dan memberikan values pada atribut HTML. Misalnya, mengubah style dengan bantuan binding directive dari Vue JS yaitu v-bind.

5. Virtual DOM

Document Object Model atau DOM adalah interface yang memudahkan program untuk mengakses dan menambahkan konten dalam dokumen. Vue JS sendiri memiliki Virtual DOM yang merupakan replika dari DOM.  Fitur ini menyimpan perubahan dokumen di replika DOM sehingga Anda lebih dulu mereview perubahan sebelum menerapkannya di DOM. Fitur ini juga ada pada React.js dan Ember.js.

6. Lightweight

Fitur ini membuat script dari Vue JS ini menjadi lebih sederhana, tetapi masih powerful dan sangat cepat.

7. Routing

Fitur ini digunakan untuk penghubung antar halaman. Fitur ini menggunakan vue-router sebagai tambahannya. Fitur ini dapat membuat website Single Page Application (SPA) hanya dengan menggunakan satu file HTML yang bisa memanggil semua halaman yang Anda punya.

8. Watchers

Fitur watchers dapat diterapkan pada data yang telah berubah. Contoh, bentuk elemen input. Anda tidak perlu menambahkan event tambahan pada elemen input. Karena watcher dapat menangani perubahan data apa pun yang membuat kode lebih sederhana dan cepat.

9. Directives

Vue JS memiliki perintah bawaan seperti v-if, v-else, v-show, v-on, v-bind, dan v-model, yang digunakan untuk melakukan berbagai aksi pada front-end website.

10. Templates

Vue JS memiliki template berbasis HTML yang menghubungkan DOM dengan data instance Vue JS. Vue JS mengkompilasi template menjadi fungsi DOM Render virtual.