[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.

Contoh Penulisan Sederhana Vue.js

Salah satu kelebihan framework ini adalah pada codingnya yang sederhana. Nah, inilah salah satu contoh penggunaannya:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="root">
<p>Nama : {{name}}</p>
<p>Link : {{website}}</p>
</div>
<script>
let app = new Vue({
el: "#root",
data: {
name: "Niagahoster",
website: "https://niagahoster.co.id"
}
})
</script>

Pada contoh di atas, kode <script src=”https://cdn.jsdelivr.net/npm/vue“></script> merupakan perintah untuk menghubungkan website Anda dengan Vue.js. Tujuan penggunaannya adalah agar website dapat menggunakan framework tersebut.

Kemudian, perhatikan bagian {{name}} pada baris ketiga. Itulah contoh cara menampilkan variabel name menggunakan Vue.js. Pada contoh ini, variabel tersebut adalah Niagahoster.

Setelah itu, Anda bisa perhatikan kode di bawah ini:

<div id="root">
<p>Nama : {{name}}</p>
<p>Link : {{website}}</p>
</div>

Id bernilai root merupakan penanda untuk memberitahu Vue.js di mana kode tersebut akan bekerja. Sedangkan, {{name}} dan {{website}} akan menampilkan variabel bernama name dan website.

Di bagian bawah, Anda akan melihat:

let app = new Vue({
el: "#root",
data: {
name: "Niagahoster",
website: "https://niagahoster.co.id"
}
})

Dalam contoh ini, terdapat variabel app untuk deklarasi awal Vue.js supaya dapat dikenali oleh file Anda. Lalu, el: “#root” digunakan untuk memberitahu di mana kode Vue.js akan digunakan.

Nah, data berfungsi untuk menyimpan variabel, dalam contoh ini, variabel name berisi Niagahoster dan website berisi https://niagahoster.co.id. 

Berikut hasil dari kode program di atas:

Fitur-fitur di Vue JS

Vue JS memiliki beberapa fitur seperti templates, reactivity, components, transitions, routing. Berikut ini adalah beberapa fitur unggulan dari Vue JS.

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.

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.

5+ Keunggulan Vue JS

Ada banyak keunggulan dari Vue.js yang menjadikannya menjadi salah satu framework terbaik. Berikut kelebihan framework ini:

1. Ukurannya Ringan

Vue.js memiliki ukuran yang lebih ringan dibanding framework lain, hanya 33KB. Artinya, Anda tak perlu waktu lama mendownloadnya. Dengan ukuran tersebut, proses pembuatan website tentu akan lebih efisien. Hasilnya, website dapat diselesaikan dalam waktu cepat, tapi tetap dengan performa yang baik

2. Dokumentasi yang Lengkap

Vue.js memiliki dokumentasi yang sangat lengkap. Hal ini akan memudahkan programmer untuk mencoba menggunakannya. Sebab, jika menemui kendala, mereka cukup membuka halaman dokumentasi online yang disediakan.

Bisa dikatakan informasi yang diberikan cukup lengkap, mulai dari cara install Vue.js hingga integrasi dengan berbagai plugin. Dengan berbagai kode yang disediakan, Anda cukup copas untuk mencoba berbagai coding dengan framework ini. Misalnya, ketika ingin melakukan user input seperti di bawah ini:

3. Mudah Diintegrasikan

Kemudahan integrasi dengan aplikasi lain tentu menjadi pertimbangan saat menggunakan framework bukan? Nah, inilah keunggulan Vue.js yang lain. 

Karena dibangun dengan dasar JavaScript, Anda akan lebih mudah ketika melakukan integrasi dengan aplikasi JavaScript lain. Hal ini diperlukan ketika Anda membangun website yang cukup kompleks seperti toko online. 

Sebagai contoh, Anda bisa mengintegrasikan website dengan sistem pembayaran otomatis (payment gateway). Jadi, ketika pembeli telah berhasil melakukan pembayaran, sistem akan melakukan konfirmasi otomatis. Dengan begitu, pembeli tidak perlu melakukan konfirmasi lagi.

4. Mudah Dipahami

Salah satu keunggulan Vue.js adalah mudah untuk dipahami. Tak heran, framework tersebut direkomendasikan untuk pemula yang ingin belajar framework JavaScript.

Selain coding yang lebih singkat, strukturnya juga lebih sederhana dibandingkan framework JavaScript yang lain. Dengan demikian, lebih mudah bagi Anda untuk menguasai framework ini. Nantinya, proses pembuatan website yang Anda lakukan bisa lebih cepat.

5. Bisa Berinteraksi Dua Arah

Keunggulan Vue.js yang lain adalah kemampuan berinteraksi dua arah. Maksudnya, Anda bisa menggunakan Vue.js untuk berkomunikasi dengan kode HTML dengan mudah. Begitu pun sebaliknya.

Hal ini akan membuat performa website menjadi lebih optimal karena komunikasi berjalan dengan baik. Kenapa bisa demikian? Sebab, Vue.js menggunakan konsep MVVM (Model View ViewModel) yang memungkinkan tampilan berkomunikasi dengan bagian proses. 

Sebagai contoh, pada metode data binding. Ketika HTML melakukan pengiriman data kepada JavaScript, akan muncul respon yang diberikan. Nantinya, respon tersebut akan ditampilkan oleh HTML kembali dan dilihat oleh user melalui browser.

6. Fleksibel

Tidak bisa dipungkiri bahwa Vue.js adalah framework yang fleksibel. Anda bisa menuliskan kode HTML, CSS, JavaScript pada satu file. Namun, bukan hanya itu saja. Dengan framework ini, Anda bisa membuat template untuk digunakan berkali-kali. 

Dengan fleksibilitas ini juga, Vue.js cukup mumpuni untuk membangun website dengan skala kecil maupun besar. 

7. Banyak Plugin

Vue.js memiliki berbagai plugin yang dapat membantu dalam pembangunan website. Mulai dari plugin untuk meningkatkan kecepatan website, meningkatkan UX, maupun untuk meningkatkan kecepatan website.

Beberapa contoh plugin yang bisa Anda manfaatkan adalah Vuetify dan Vue Router.

Vuetify adalah plugin yang menawarkan komponen yang menarik. Dengan plugin ini, Anda akan lebih mudah membuat tampilan website yang menarik meskipun tanpa skill desain yang mumpuni. Belum lagi, adanya beberapa fitur seperti dukungan RTL (right to left) dan Tree Shaking akan membuat website Anda lebih fungsional.

Semantara itu, Vue Router adalah plugin untuk membuat website Single Page Application dengan mudah. Dibekali dengan fitur seperti view transition effects dan customizable scroll behavior, website Anda akan mampu tampil unik dan menarik.

8. Banyak Tema yang Menarik

Vue.js hadir dengan berbagai tema yang menarik, baik yang gratis maupun berbayar. Anda juga bisa menggunakan tema yang terang atau dark mode sesuai kebutuhan.

Tidak hanya itu, tema yang ditawarkan juga dilengkapi dengan berbagai fitur unggulan dan komponen yang lengkap. Dengan begitu, Anda tidak perlu membuat rancangan tampilan dari awal dan hanya perlu fokus menangani alur website saja. 

Kesimpulan

Dengan struktur kode yang sederhana dan mudah dipahami, Vue JS pantas menjadi framework yang sangat populer dan paling sering digunakan saat ini. Apalagi Vue JS dapat membuat ukuran file kode yang kecil sehingga membuat load website lebih cepat. 

Jika Anda membutuhkan Vue JS untuk mengembangkan aplikasi web, tak perlu khawatir. Semua paket  unlimited hosting, cloud hosting, dan cloud VPS di Niagahoster sudah  didukung dengan platform Vue JS.

Demikian panduan mengenai Vue JS. Semoga pengertian dan cara menggunakan Vue JS  ini bermanfaat untuk Anda. Pada penerapannya terkadang ada kendala yang mungkin saja muncul. Jangan sungkan untuk mendiskusikannya melalui kolom komentar yang tersedia di bawah.

Jika Anda menyukai artikel dari kami dan tidak ingin melewatkan informasi dari kami. Silahkan isi kolom subscribe untuk mendapatkan informasi terbaru dari kami.