Install Vue.js di Ubuntu 18.04 LTS

Images By Client Resource

Apa sih Vue.js?

Vue.js merupakan salah satu framework frontend yang akan memudahkan kita dalam membangun sebuah website terutama pada bagian tampilan. Vue adalah kerangka kerja JavaScript progresif yang berfokus pada pembangunan antarmuka pengguna. Karena hanya bekerja di "view layer", vue.js ini tidak digunakan untuk menangani hal seperti middleware dan backend, karenanya dapat diintegrasikan dengan mudah ke proyek dan library atau plugin lain. Vue.js menawarkan banyak fungsi untuk bagian tampilan dan dapat digunakan untuk membangun aplikasi web atau halaman yang kuat.

Nah untuk fitur-fiturnya sendiri, berikut adalah fitur-fitur yang menjadi andalan dari vue.js ini:

1. Reactive Interfaces
2. Declarative Rendering
3. Data Binding
4. Directives
5. Template Logic
6. Components
7. Event Handling
8. Computed Properties
9. CSS Transitions and Animations
10. Filters 

Banyak yang bilang kalau vue.js ini cocok dikolaborasikan dengan Laravel, tapi terlepas dari itu vue.js ini bisa kalian gunakan di framework PHP atau bahasa pemrograman web lainnya. Ada juga yang menggunakan full vue.js dan untuk backend-nya menggunakan full service API.

Cara Install

Untuk menggunakan vue.js ini sendiri ada dua cara yang dapat kita lakukan yaitu yang pertama embed source code vue.js dengan meletakan tag <script></script> di dalam body html halaman yang akan dibuat dan yang kedua adalah dengan menginstallnya via vue-cli.

Untuk cara yang pertama ini kita bisa gunakan CDN yang telah disediakan oleh vue.js. CDNnya pun dibagi menjadi dua. Untuk keperluan development atau belajar kita bisa menggunakan CDN berikut.

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

CDN diatas untuk keperluan ketika kita masih mendevelope webnya, karena CDN tersebut dapat menampilkan error atau warning yang berguna untuk kita debugging. Sedangkan untuk proses production bisa menggunakan CDN berikut.

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

Untuk cara yang kedua yaitu kita akan menggunakan vue-cli untuk mendownload semua resource yang dibutuhkan untuk menjalankan vue.js. Jika kita ingin menggunakan cara ini jangan lupa pula untuk memastikan bahwa server atau laptop kita sudah terinstall node.js karena vue.js akan menggunakan node.js sebagai web servernya.

Pertama kita akan install vue-cli dengan mengetikkan perintah berikut di terminal.

npm install -g @vue/cli

Proses installasi vue-cli menggunakan npm

Untuk mengecek apakah vue-cli sudah terinstall atau belum kita bisa gunakan perintah vue --version jika muncul versi vuenya maka installasi berhasil. jika perintah vue tidak dikenali silahkan update source kalian dengan mengetikan source ~/.profile kemudian coba kembali perintah vue sebelumnya. Sampai pada tahap ini, vue-cli berhasil diinstall.

Setelah kita berhasil menginstall vue-cli, kita dapat membuat proyek vue baru menggunakan vue-cli yang dilengkapi dengan template dan plugin yang kompatibel dengan vue.js. Berikut perintah untuk membuat project vue baru.

vue init webpack belajarvue

Perintah diatas berfungsi untuk membuat project vue baru dengan template webpack kedalam folder belajarvue. Setelah proses instalasi selesai maka kita tinggal menjalankan project tersebut dengan perintah npm run dev. Secara default project kita bisa diakses via browser melalui localhost:8080.

Sampai disini silahkan teman-teman berkreasi untuk membuat frontend terbaik menggunakan Vue.js. Sekian dan terima kasih.