Tutorial Vue.js 2 - Cara Install Vue.js

Sebelumnya saya telah mengenalkan anda dengan library Vue, jika anda belum mengenalnya maka silakan lihat terlebih dahulu tulisan saya tersebut. Seperti yang saya jelaskan pada tutorial pertama telah dibahas apa itu Vue, kemudian sejarahnya, mengapa memilih Vue dsb.

Rekomendasi : Tutorial Vue.js 1 - Apa itu Vue.js?

Sekarang saya akan membahas bagaimana cara install Vue.js, silakan simak pemaparannya.

Untuk mengistall Vue terdapat dua pilihan yaitu:

1. Instalasi Vue CLI dengan npm atau yarn.
2. Menyisipkanya kedalam tag <script> (CDN).

Mari kita bahas yang pertama dulu.

1. Instalasi Vue CLI dengan NPM

Untuk mengintall Vue melalui Command Line Interface (CLI) atau kalo di windows kita lebih mengenal dengan istilah Command Prompt (CMD) mesti melalui Node.js, oleh karena itu hal pertama yang akan kita lakukan adalah menginstall Node.js, setelah itu berhasil maka kita akan menginstal Vue menggunakan package manager NPM atau Yarn.

Sedikit penjelasan mengenai Node.js

Node.js merupakan platform yang dapat digunakan di sisi server, sama halnya seperti PHP namun yang membedakanya adalah Node.js menggunakan bahasa pemrograman JavaScript.

Oleh karena itu berkat Node.js ada bisa mengembangkan aplikasi sekaligus di sisi client maupun server tanpa memperlajari bahasa lainya lagi.

Setelah mengenal sedikit Node.js lalu Apa itu package manager NPM atau Yarn?

NPM atau Yarn merupakan package manager yang digunakan untuk mengambil suatu resource dengan hanya menggunakan beberapa perintah di terminal (linux) ataupun di command line (windows).

Jika di ibaratkan seperti apt di ubuntu dan pacman arch linux

Cara Install Node.js pada Linux

Untuk dapat mendownload Node.js anda dapat mengunjungi website resminya pada link berikut: https://nodejs.org/en/download/. Perlu diingat bahwa download lah sesuai sistem operasi anda, disni kebetulan saya menggunakan Linux.

Jika anda ingin lebih mudah dan cepat maka dapat menginstalnya melalui repository di linux.

Sebelumnya pastikan anda telah melakukan pembaruan pada repository dengan menggunakan perintah di bawah ini:

sudo apt update

Jika sudah terupdate maka selanjutnya tinggal menginstall Node.js, dengan menggunakan perintah seperti dibawah ini.

sudo apt install nodejs

Stelah mengetikan perintahnya maka akan muncul tampilan seperti pada gambar di atas.

Jika telah selesai proses instalisasinya maka sekarang waktunya untuk mengecek versi dari Node.js yang telah terinstal pada perangkat, caranya tinggal mengikuti perintah di bawah ini:

nodejs -v

Sampai pada tahap ini, kita telah selesai menginstall Node.js namun belum termasuk NPM. Oleh karena itu tahapan selajutnya setelah selesai menginstall Node.js adalah pemasangan pakcage manager.

Namun sebelum melakukan proses intalasi NPM, pastikan terlebih dahulu bahwa ada telah mengupdate kembali repository-nya dengan menggunakan perintah sudo apt update.

Setelah proses update repsotory berhasil, silakan lakukan tahap selanjutnya yaitu instalasi NPM.

Berikut perintahnya:

sudo apt install npm

Jika sudah selesai proses intalisasi package manager maka selanjutnya anda tinggal melihat versinya:

npm -v

Cara Install Vue Menggunakan CLI

Nah, sekarang barulah kita mulai persiapan yang sebenarnya untuk menginstall Vue, setelah melewati proses yang cukup panjang sampai pada tahap ini.

Node.js telah berhasil terinstall...

NPM juga telah terintall...

Untuk menginstall Vue dapat mengikuti perintah ini:

sudo npm install -g @vue/cli

Jika proses instalisasi Vue telah selesai maka akan muncul tampilan seperti gambar di atas.

Anda dapar mengecek versi dari Vue yang telah anda install dengan menggunakan perintah ini:

vue --version

Langkah instalasi Vue telah selesai, selanjutnya kita akan membuat project pertama kita.

Membuat Project Pertama dengan Vue

Sebelum membuat project pertama, pastikan dulu lokasi penyimpanan project Vue kita agar mudah ditemukan saat ingin menjalankan programnya.

Saya membuat folder Vue di Document agar mudah di jangkau, seperti gambar di bawah ini:

Untuk membuat project Vue, anda tinggal mengetikan perintah ini:

vue create latihan

Pada perintah di atas terdapat vue create latihan, yang perlu diperhatiakan adalah vue create merupakan perintah wajib tang harus di ikuti, sedangkan latihanmerupakan nama project yang akan di buat artinya dapat dirubah sesuai dengan keinginan anda.

Setelah itu akan muncul pilihan default (babel, eslint) dan manually select features, pilih saja yang default (babel, eslint).

Tunggu proses pembuatan project selesai, jika berhasil maka akan muncul pesan Successfully created project latihan, seperti pada contoh di bawah ini:

Setelah berhasil membuat project latihan, sekarang masuk kedalam latihan untuk menjalankanya. Ikuti perintah di bawah ini:

cd latihan

Kemudian tuliskan perintah di bawah ini untuk me-running programnya:

npm run serve

Maka akan muncul pemberitahuan seperti ini:

Pada gambar di atas dapat kita cermati bahwa untuk membuka atau menjalankan project kita dapat di lakukan dengan  dua cara:

1. local : http://localhost:8080
2. Network : http://192.168.0.2:8080/

Pilih salah satunya, maka akan tampil seperti ini:

Jika sudah tampil seperti gambar di atas, maka selamat anda telah berhasil membuat project menggunakan Vue CLI.

2. Menyisipkanya kedalam tag script (CDN)

Untuk cara yang kedua ini, kita dapat menambahkanya kedalam halaman HTML menggunakan tag <script>

Library Vue pada cara ini di bagi menjadi dua bagian, berikut diantaranya:

1. Development Version

2. Production Version

Versi development di rekomendasikan untuk dipakai pada saat proses pembuatan aplikasi, sebab terdapat peringatan jika terjadi kesalahan pada kode sehingga akan ditampilkan kesalahanya.

Kita dapat mendownload versi development pada tautan berikut ini: https://vuejs.org/js/vue.js

Berbeda dengan versi production, pada mode ini di kususkan digunakan pada saat aplikasi sudah selesai dikembangkan dan akan segera di laucnh ke user untuk digunakan, sebab pada mode ini kode Vue akan di kompres sehingga mengurangi memori yang dipakai.

Kita dapat mendownload versi production pada tautan berikut ini: https://vuejs.org/js/vue.min.js

Pada pembahasan diatas dikususkan untuk penggunaan secara local, jadi anda bisa download tautan yang disertakan diatas kemudian gunakan tanpa koneksi internet.

Jika anda memilih untuk menautkan secara langsung ke severnya secara online, maka anda dapat menggunakan cdn yang telah disediakan : unpkg dan cndjs, jika ditulis ke dalam tag script maka akan seperti ini dengan versi 2.5.16:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

atau

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

Note : seperti yang telah saya katakan sebelumnya jika anda akan melaunching aplikasi maka ubah vue.js menjadi vue.min.js untuk tujuan performa dan keamanan.

Membuat Project Pertama menggunakan CDN

Jika anda menggunakan cdn, maka hal pertama yang akan kita lakukan adalah membuat buat file index.html kemudian tambahkan tag <script> berikut didalam kerangka HTML.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Vue</title>
</head>
<body>
  <div id="vue">
      <h1>{{ pesan }}</h1>
  </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
  var app = new Vue({
  	el: '#vue',
  	data: {
    	pesan: 'Saya Belajar Vue.js!'
  	}
  })
</script>
</body>
</html>

Simpan file ini dengan nama salogy.html di folder Document.

Kemudian buka di browser, maka akan tampil seperti ini:

Seperti yang terlihat pada kode diatas, kita memanggil library Vue.js dari cdnjs dengan tag <script>. Lalu kita menggunakan tag <div> dengan id #vue yang didalamnya terdapat tag <h1> yang berisi {{ pesan }}.

Pada bagian inilah terdapat kode Vue yang mengatur agar menampilkan pesan "Saya Belajar Vue.js!":

<script>
  var app = new Vue({
  	el: '#vue',
  	data: {
    	pesan: 'Saya Belajar Vue.js!'
  	}
  })
</script>

Untuk penjelasan lebih lengkap mengenai kode-kode ini akan saya bahasa pada kesempatan berikutnya. Sekian pembahasan mengenai Cara Install Vue, semoga bermanfaat!