Terdapat 3 (tiga) cara instalasi Vue.js yang paling umum, antara lain :

  • Unduh file vue.js ke local development.
  • Mentautkan file vue.js via CDN (Content Delivery Network).
  • Install Vue.js Menggunakan Vue-CLI (Command Line Interface).

Unduh File vue.js ke Local Development

Sebagai langkah awal, Anda bisa mengunduh file vue.js dari website resminya di https://vuejs.org/v2/guide/installation.html. Seperti terlihat pada gambar, terdapat dua versi file yang bisa dipilih, yaitu : Development dan Production.

cara instalasi vue.js

Development Version : versi yang digunakan ketika mengembangkan aplikasi Vue.js, karena seluruh pesan error akan ditampilkan (jika ada) dan disertai fasilitas untuk debugging. Ukuran file-nya sekitar 342 KB.

Production Version : sedangkan yang ini adalah versi ramping dari development. Ukuran file-nya jauh lebih kecil di kisaran 94 KB, diperuntukkan bagi aplikasi Vue.js yang sudah Live dan siap digunakan.

Untuk mencobanya, silahkan buat folder / direktori baru terlebih dahulu di sembarang lokasi path yang diinginkan. Kemudian letakkan file vue.js hasil unduhan (development version) di folder / direktori yang telah disiapkan.

Di dalam folder / direktori tersebut, buat file baru bernama index.html, kemudian isi dengan kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Belajar Vue.js</title>
</head>
<body>
    <p>Selamat Datang di Vue.js</p>
    <script src="vue.js"></script>
</body>
</html>

Pada potongan kode di atas, tag <script src="vue.js"></script> yang ditulis tepat sebelum </body> adalah cara menyisipkan / mengintegrasikan Vue.js ke dalam aplikasi.

Mentautkan File vue.js Via CDN

Sama persis dengan cara sebelumnya, hanya saja kali ini tautan file vue.js diarahkan ke website lain secara online https://unpkg.com/vue.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Belajar Vue.js</title>
</head>
<body>
    <p>Selamat Datang di Vue.js</p>
    <script src="https://unpkg.com/vue"></script>
</body>
</html>

Mengecek Hasil Instalasi Vue.js Local dan CDN

Untuk memastikan bahwa Vue.js berhasil dimuat oleh aplikasi (index.html), klik kanan pada halaman browser Google Chrome kemudian pilih Inspect.

cara instalasi vue.js

Setelah Inspect, lanjutkan dengan memilih tab Console. Jika Vue berhasil ter-install, maka seharusnya akan muncul pesan seperti di bawah.

cara instalasi vue.js

Instalasi Vue.js Via Vue-CLI

Sebelum memulai, pastikan di komputer Anda telah ter-install Node.js dan npm (Node Package Manager), biasanya npm akan otomatis ter-install sepaket dengan Node.js. Bagi pengguna sistem operasi macOS atau Linux, Anda dapat mengeceknya melalui terminal dengan perintah :

node -v
npm -v
cara instalasi vue.js

Seperti tertera pada gambar di atas, versi node yang saya gunakan adalah 12.4.0, sedangkan versi npm nya adalah 6.13.4. Node.js saya install menggunakan NVM (Node Version Manager) yang package-nya tersedia di Homebrew – package manager for macOS (or Linux). Untuk langkah-langkah instalasi-nya dapat Anda baca di Cara Install Node.js di macOS dan Linux.

Sekedar Saran : Jika benar-benar serius ingin menekuni bidang web development, sangat disarankan untuk menggunakan macOS atau Linux karena nantinya akan banyak melibatkan esksekusi CLI (Command Line Interface) melalui terminal.

Setelah Node.js (dan juga npm) dipastikan ter-install, ketik perintah berikut di terminal :

sudo npm install -g @vue/cli --unsafe-perm
  • sudo : untuk memperoleh akses sebagai root / superuser.
  • npm install : meminta npm meng-install package yang disebutkan.
  • -g : instalasi package secara global, dapat diakses dari path mana saja, tidak hanya di folder / direktori aktif saja.
  • @vue-cli : Vue-CLI (Command Line Interface) adalah nama package yang akan di-install melalui npm.
  • --unsafe-perm : kadang-kadang dibutuhkan untuk mengabaikan pesan error file / directory permission.
cara instalasi vue.js

Jika instalasi @vue-cli berhasil, maka akan muncul deretan pesan seperti gambar di atas. Untuk mengetahui versi @vue-cli yang ter-install, ketik perintah berikut :

vue --version
cara instalasi vue.js

Sesuai gambar di atas, @vue-cli yang saya gunakan adalah versi 4.1.2.

Mengecek Hasil Instalasi Vue.js Via Vue-CLI

Setelah @vue-cli ter-install, langkah selanjutnya adalah membuat sebuah project Vue baru, misal dengan nama belajarvue. Caranya, ketik perintah berikut di terminal :

vue create belajarvue
cara instalasi vue.js

pwd adalah perintah Unix / Linux yang digunakan untuk mengetahui lokasi path Anda saat ini.

Sebelum project dibuat, Vue-CLI akan mengajukan pertanyaan seperti di atas, pilih default (babel, eslint) kemudian enter / return. Setelah project Vue berhasil dibuat, akan muncul pesan :

cara instalasi vue.js

Untuk mencoba menjalankan project Vue tersebut, ketik di terminal :

cd belajarvue
npm run serve
cara instalasi vue.js
cara instalasi vue.js

Setelah App running at, perhatikan bagian Local: http://localhost:8080/, ketik atau copy paste alamat tersebut di browser seperti berikut :

cara instalasi vue.js

Sampai di tahap ini, SELAMAT, Anda baru saja membuat sebuah project Vue baru. Sudah lebih semangat belajar Vue.js nya ? jika YA, ayo kita lanjutkan di materi berikutnya Dasar Pembuatan Aplikasi Vue.js.