Pada tulisan ini saya akan membuat series mengenai pemrograman web dengan Vue.js. Series ini akan disusun untuk membuat sebuah program sederhana yang memanfaatkan fitur-fitur umum yang sangat mungkin digunakan dibanyak kasus. Sedikit banyak tulisan ini akan mereplika project yang sama seperti Yii2-Series yang saya buat, namun dengan menggunakan Vue.js.
Secara garis besar (dan mungkin akan bertambah sesuai keperluan yang mungkin terjadi) outline dari series tulisan ini akan terdiri dari hal berikut.
- Mengenal Vue.js dan Instalasi Vue.js
- Instalasi Nuxt
- Membuat API dengan Lumen
- Retrieve Data dari API dan Menampilkannya (dengan Axios)
- Layout Dasar dan Manipulasinya
- Membuat Halaman Login
- CRUD Operation pada Vue
- ....
Anda dapat mengunduh dan memantau progress dari series ini lewat repositori github belajararief-nuxt-blog dan untuk api-nya dari belajararief-lumen-articles-api. Silakan bintangi (star) untuk dapat lebih mudah memantau perkembangan repositori.
Requirement
Untuk memudahkan anda dalam memahami petunjuk dalam tulisan ini, maka beberapa hal yang perlu diperhatikan mengenai environment saya dalam menyusun tutorial adalah sebagai berikut:
- Sistem operasi yang saya gunakan adalah Windows 10 64bit dengan terminal menggunakan powershell terminal (beberapa command seperti cd dapat berbeda dengan command prompt biasa), namun saya akan berusaha sebisa mungkin mencontohkan perintah pada sistem operasi lain jika memunkinkan.
- Pada saat tulisan ini dibuat menggunakan Nodejs v11 dan NPM v6.5.
- Project Blog nantinya akan menggunakan Nuxt.js yang merupakan Vue.js yang sudah memiliki konfigurasi yang diperlukan untuk membuat pemrograman dengan vue.js menjadi lebih muda. Dengan Nuxt.js maka kita akan memiliki sebuah template Vue.js yang lebih opiniated dibandingkan mengembangkan project vue.js dari awal. Nuxt.js yang digunakan pada project ini adalah Nuxt.js v.2.6.0
Mengenal Vue.js
Vue.js seperti pada website resminya memproklamirkan diri sebagai The Progressive Javascript Framework. Walaupun memproklamirkan diri sebagai Framework Vue.js juga dapat digunakan sebagai library tambahan (selayaknya menggunakan Jquery), tanpa perlu melakukan instalasi penuh Vue.js. Pengembangan web dengan vue sebenarnya tidak berbeda jauh dengan React dimana pengembangan akan banyak berbasis komponen sehingga kita akan punya komponen-komponen yang dapat digunakan terus menerus dibanyak halaman.
Vue didesain untuk dapat diadopsi secara inkremental / bertahap. Core Library dari Vue difokuskan pada view layer dan mudah untuk diintegrasikan dengan library yang ada pada projet kita. Vue juga disebut punya kemampuan yang baik digunakan pada SPA ketika dikombinasikan dengan pemrograman modern dan libaries Vue.
Instalasi Node.Js, NPM dan Vue installer
Pada series ini kita akan memperlakukan Vue sebagai framework, sehingga kita butuh melakukan instalasi Nodejs (dan npm) serta Vue installer. Selain itu kita juga akan melakukan instalasi Nuxt installer karena kita akan menggunakan template Nuxt untuk aplikasi Vue kita.
Instalasi NodeJS dan NPM
Instalasi Node.js pada windows sangat mudah. Anda dapat langsung mengunduh installer yang tersedia di https://nodejs.org/ dan melakukan instalasi Node.js seperti biasa. Dalam paket instalasi tersebut sudah tersedia NPM sehingga anda tidak perlu lagi menginstall NPM secara terpisah.
Untuk pengguna Linux anda dapat mengunduh dari website tersebut atau menambahkan terlebih dahulu repositori Node.js ke komputer anda, kemudian melakukan instalasi seperti biasa. Contoh berikut adalah menggunakan ubuntu server.
sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash
sudo apt-get install nodejs
Ganti x dengan versi Node.js yang ingin anda lakukan instalasi.
Selanjutnya untuk melihat apakah Node.js telah dapat digunakan di komputer anda maka jalankan perintah berikut untuk melihat versi dari Node.js dan npm anda.
node -v
npm -v
Vue Installer (dan Nuxt Installer)
Pada series ini kita akan banyak menggunakan instalasi Vue dengan CLI sehingga akan sangat baik jika kita menambahkan @vue/cli ke npm kita. Tambahkan @vue/cli ke npm kita dengan perintah berikut.
npm install -g @vue/cli
Selanjutnya untuk nuxt sendiri selama npx sudah terinstall (secara default bersama dengan instalasi Node.js) maka kita dapat dengan mudah melakukan instalasi nuxt dengan perintah berikut.
npx create-nuxt-app <project-name>
Demikian tulisan ini. Semoga bermanfaat dan Happy Coding!