Instalasi dan Konfigurasi Menjalankan Vue JS

Artikel Terkait Vue JS
Vue merupakan salah satu pustaka Javascript, sebagai sebuah pustaka maka Vue perlu ditambahkan ke dalam halaman HTML untuk dapat digunakan. Library Vue terbagi menjadi dua, yakni versi development biasanya filenya tidak di kompres dan versi production biasanya filenya dikompress. Disarankan dalam pengembangan dan pembangunan aplikasi menggunakan Vue dengan model development karena semua informasi kesalahan atau peringatan akan muncul apabila terjadi kesalahan kode. Untuk model production disarankan digunakan saat aplikasi yang sudah selesai dibangun dan siap di publish karena dapat mengurangi ukuran aplikasi dan apabila terjadi kesalahan informasi error tidak akan muncul.

Vue Instalasi dan Konfigurasi
Sumber : codepolitan


File library Vue dapat ditambahkan dengan ditautkan langung dengan server Vue (CDN) ataupun secara lokal dengan mengunduh terlebih dahulu file tersebut dan menyimpan di lingkungan aplikasi yang akan dibangun.  Library Vue versi development dapat diunduh di vuejs.org/js/vue.js sedangkan versi production bisa di unduh di vuejs.org/js/vue.min.js.

Untuk menambahkan library Vue JS ke dalam halaman HTML secara lokal, seperti pada umumnya kita bisa menggunakan kode seperti berikut.

<script src=”assets/vue.js”></script>

 Apabila menambahkan Vue dengan menautkan langung dengan server Vue bisa lewat cdn seperti berikut.

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

Dalam membangun aplikasi dengan skala besar instalasi Vue disarankan menggunakan package manager seperti NPM atau YARN. Disamping itu juga Vue memiliki tools CLI yang dibuat sendiri yang bisa didapatkan di cli.vuej/org sehingga bisa memberikan kemudahan dalam membuat scaffolding projek aplikasi seperti manajemen kode, tools dan konfigurasi saat pengembangan.

Hello World

Mari kita buat kode untuk menampilkan teks hello world menggunakan library Vue dengan cara yang cukup sederhana dengan membuat file html dengan nama file terserah anda kemudian masukan kode berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="library/vue.js"></script>
</head>
<body>
    <div id="apk">
        <h2>{{ pesan }}</h2>
    </div>

    <script type="text/javascript">
    var vm = new Vue({
        el: '#apk',
        data: {
            pesan: 'Hello World :)'
        }
    })
    </script>
</body>
</html>


Kemudian buka file tersebut dengan menggunakan browser, maka akan menghasilkan tampilan seperti berikut :

Vue Hello World


Dari kode sederhana ini memang terkesan ribet jikalau hanya untuk menampilkan teks hello world saja namun nantinya Vue dapat digunakan dalam memanipulasi tampilan HTML secara reaktif. Lantas bagaimana Vue dapat bekerja pada kode program di atas.

Pertama kita perlu HTML dalam menjalankan perintah Vue, sebab Vue betugas memanipulasi tampilan HTML.

Kedua kita perlu menambahkan library Vue ke HTML, bisa secara lokal maupun lewat server Vue.

Ketiga kita perlu membuat kontainer berupa elemen HTML, untuk menandai bahwa di dalam HTML tersebut nantinya hasil kompilasi Vue akan ditampilkan. Sebagai penanda maka perlu ditambahkan atribut id yang nanti akan di inisiasi objek Vue.

<div id=”app”>
...
</div>

Keempat perlu menggunakan double mustache atau kurung kurawal dalam menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue.

<div id=”app”>
     <h2>{{ pesan }}</h2>
</div>

Kelima perlu membuat intance untuk class Vue dengan ditulis menggunakan Javascript

Var vm = new Vue({
   El: ‘#apk’,
   Data: {
      pesan: ‘hello world :)’
   }
})

Objek Vue yang dibuat akan disimpan ke dalam variabel bernama vm agar memudahkan nantinya saat mengakses objek ini. Properti el menunjukkan id dari elemen HTML yang akan dijadikan target untuk ditampilkan  sedangkan properti data adalah apa yang akan ditampilkan. Disamping itu bisa juga menggunakan vm.$mount(‘#apk’) dalam mengarahkan mount point Vue pada saat berjalan.

kita bisa mengakses properti dan variabel dalam objek vm tersebut, misalnya untuk mengakses properti el atau data maka kita bisa gunakan perintah vm.$el atau vm.$data. Adapun untuk mengakses variabel pesan dalam properti data kita bisa gunakan perintah vm.$data.pesan atau langsung vm.message (tanpa tanda dollar).

Menguji Reaktivitas

Pada console di browser, mari kita ubah variabel pesan, dengan menggunakan perintah berikut berikut kemudian tekan enter :

vm.message = "Reaktif Dong"


Vue Reaktif


tanpa refresh maka seketika itu juga teks yang muncul di halaman browser berubah sesuai dengan teks yang kita sematkan pada variabel pesan di console. Pada kondisi nyata, tentu saja perubahan data tidak dilakukan dengan menggunakan console pada browser melainkan melalui cara-cara yang natural yaitu menggunakan perintah Javascript yang dijalankan misalnya melalui event onclick button, input dari user, dan lain sebagainya,

Vue merupakan pustaka Javascript yang bekerja memanipulasi elemen HTML menggunakan teknik virtual DOM HTML sehingga lebih cepat prosesnya dibandingkan langsung memanipulasi DOM-nya. Untuk menggunakannya pada aplikasi, maka pustaka Vue cukup di includekan menggunakan element HTML script sebagaimana umumnya pustaka Javascript.

Rekomendasi Web Hosting
  1. 20rb perbulan. Diskon hingga 40% kode kupon: MCP Daftar disini (apache).
  2. 10rb perbulan. Diskon hingga 75% kode kupon: MCP Daftar disini (litespeed).
  3. 10rb perbulan. Diskon hingga 70% kode kupon: aff-MCP Daftar disini (apache).