Sesuai dengan yang tertera pada halaman utama vuejs.org, Vue.js adalah sebuah framework javascript progresif. Artinya Vue.js adalah kumpulan modul dan fungsi javascript siap pakai yang akan membantu kita membuat suatu web menjadi lebih dinamis, interaktif, dan powerfull tanpa harus ribet membuat fungsi-fungsi umum lagi.

Tampilan beranda website Vue.js.

Javascript sendiri merupakan bahasa pemrograan web populer berbasis client-side. Kode-kode javascript akan dikirimkan dari server website ke browser client yang kemudian diolah dan diproses pada saat kode berada di pihak client.

Saat ini, ada banyak sekali framework javascript yang sebetulnya bisa kita pakai, selain Vue.js ada juga AngularJS atau ReactJS. Berdasarkan data dari https://medium.com/javascript-scene selama tahun 2014 hingga 2018, kita bisa lihat porsi unduh dari ketiga framework tersebut di diagram di bawah ini.

Tentang Vue.js

Vue.js (dibaca: viuu) adalah framework javascript progresif yang memiliki arsitektur MVC alias Model-View-Controller layaknya framework PHP CodeIgniter dan Laravel. Dan Vue.js sendiri bekerja pada lapisan View yang banyak berkaitan dengan tampilan website.

Mengutip https://medium.com/@riesdiansyah_64327 Vue.js pertama kali di temukan oleh Evan You yang pernah bekerja di Google sebagai Creative Technology (2012–2014) dan Meteor Development Group (2014–2016) sebagai Core Dev. Dan di pertengahan tahun 2016 dia akhirnya memutuskan untuk fokus membangun Vue.js hingga saat ini.

Evan You, Creator Vue.js | Sumber: wptavern.com

Vue.js pertama direlease pada Februari 2014 dan di minggu pertama release mendapatkan perhatian yang baik di dunia maya khususnya para developer dan media. Dan sampai tahun ini, Vue.js selalu berkembang secara konsisten hingga menjadi salah satu framework idaman bagi para web developer.

Instalasi Vue.js

Seperti halnya instalasi framework-framework lainnya, untuk bisa menggunakan Vue.js kita hanya perlu menempelkannya pada body halaman web. Untuk bentukan web umum, biasanyak kita tempatkan pada file index.html.

Untuk menempelkannya sendiri sangat mudah, jika ingin mengaitkan secara online via CDN cukup tempelkan kode berikut pada diantara tag <body>.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Ini yang via UNPKG.

<script src="https://unpkg.com/vue"></script>

Cara lain, kamu juga bisa mengunduh file framework Vue.js dari https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js, simpan pada folder projek (copykan aja semua isinya ke notepad, save lagi dengan nama vue.min.js hehe), lalu kaitkan. Sebagai contoh, jika file Vue.js ditempatkan di folder yang sama dengan file html/php yang memanggilnya maka saya menempelkannya dengan cara sebagai berikut.

<script src="vue.min.js"></script>

Jika file Vue.js ditempatkan pada folder Stylesheet misalnya (satu tingkat dibawah file yang memanggilnya), maka saya akan menempelkannya dengan cara sebagai berikut.

<script src="Stylesheet/vue.min.js"></script>

Editor yang Saya Pakai

Text editor yang saya pakai dalam membuat konten pembelajaran Vue.js di blog ini adalah Visual Studio Code ditambah dengan plugin Lite Server untuk mempermudah saya dalam menjalankan program web yang saya buat.

Editornya powerfull, tampilannya keren, dan yang pasti banyak temen mahasiswa yang juga pakai text editor ini jadinya saya ikut-ikutan juga deh 🙂

Untuk plugin Lite Server kita bisa memasangnya dengan mencarinya di menu Extension.

Menu Extensions di samping kiri.
Install Live Server

Oke, itulah sedikit pengenalan dan cara instalasi Vue.js. Pertanyaan atau tanggapan bisa kamu submit di kolom komentar ya. Semoga bermanfaat 🙂

Pos ini adalah panduan belajar pertama dari modul belajar Belajar Framework: Vue.js.