Halo!
Setelah analisa ga jelas kemarin, tiba saatnya ngoding nih. Bagian paling seru. Tipis-tipis, kita mulai dari setup dev tools-nya, alias persiapan alat dan bahan. FYI, saya pakai unix-like OS, pakai terminal. Kalau pembaca pakai Windows, mungkin bisa pasang WSL dulu. Atau pakai terminal dari VS Code. Silakan googling.
TL;DR
Yang sedang terburu-buru, boleh langsung ke bagian paling bawah. Ada snippet hasil akhir setup HTML & JS nya.
Pondasi
Sebelum masang library aneh-aneh, kita bikin dulu pondasinya. Mulai dari sini, calon aplikasinya saya kasih nama: Inkos.
Saya punya folder khusus development, ada di home/Dev
atau ~/Dev
.
Mari membuat direktori di sana, masuk, lalu inisiasi dengan Yarn.
mkdir inkos && cd inkos && yarn init -y
Hasilnya jadi: ~/Dev/inkos
Struktur foldernya sekarang:
-inkos
-package.json
Vue
Saya kalau siang bekerja sebagai frontend developer. Jadi, aplikasi ini lebih ke arah frontend. Namanya frontend ya doyan kalau mainan view engine. Secara pribadi, saya suka mainan Vue.js buatan mas Evan You. Karena lebih sederhana dari React. Cocok untuk quick-prototyping sehari-hari. Kalau kata senior saya, learning-curve nya lebih enak. Maksudnya, dengan waktu yang singkat, udah bisa dapet teknik banyak.
Cara pasang Vue ke pondasi kita ada macem-macem. Bisa langsung download terus pasang ke script tag, bisa pakai CDN, bisa pakai npm/yarn, bisa pakai CLI. Paling enak ya pakai CLI karena sudah disiapkan semuanya, tapi mereka tidak merekomendasikan pakai CLI kalau kita belum terlalu paham tentang build tools gitu-gitu lah. Berhubung saya masih merasa junior dan tidak paham build tools (walaupun sering pakai), kali ini saya akan menuruti perintah tim Vue, menggunakan direct script include. Hehe.
Cari tombol download "Development Version" di sini
Lalu masukkan file Vue.js ke root-nya Inkos.
Strukturnya jadi gini:
-inkos
-package.json
-vue.js
Tailwind
Lain cerita dengan Vue yang menyarankan direct include untuk pembelajar, Tailwind malah menyarankan untuk install pakai NPM/Yarn, karena kalau pakai CDN atau direct include, tidak semua fitur bisa dipakai. Kita ikutin aja maunya Tailwind ya.
yarn add tailwindcss
Nah, sekarang muncul deh folder jahanam node_modules
yang ga perlu dilihat isinya. Struktur folder:
-inkos
-node_modules
-package.json
-vue.js
-yarn.lock
Entry Point
Di beberapa build tools, ada yang namanya entry point. Secara sederhana, maksudnya adalah file utama yang jadi tempat masuk file-file lainnya. Saya mau bikin file index.js
untuk entry point Vue-nya.
touch index.js
Gabungin
index.html
Bikin index.html
di root direktorinya, sejajar sama package.json
. Terus buka pakai editor. Saya pakai VS Code.
touch index.html && code .
Buka file index.html
, mulai bikin struktur HTML dengan <body>
kosong. Atau bisa pakai emmet untuk VS Code. Masukin tanda seru !
terus pencet tab
.
scripts
Setelah itu, panggil si vue.js
& entry point index.js
di dalam body, bagian paling bawah, sebelum tag </body>
. Vue nya dulu baru index ya.
Hasilnya gini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="vue.js"></script>
<script src="index.js"></script>
</body>
</html>
styles
Scripts-nya sudah masuk semua, sekarang styles-nya. Bikin dulu entry point untuk style, namanya index.css
. Iya, memang yang entry-entry itu biasanya pakai nama index.
touch index.css
Langsung panggil si tailwind lewat situ. Jadinya gini nih:
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Aneh, kan. Itu bentuknya ga kayak kode css pada umumnya. Supaya bisa pakai tailwindnya, kita harus memproses si index.css
itu dulu. Ada banyak caranya, tapi saya akan memproses dengan Tailwind CLI.
npx tailwindcss build index.css -o tailwind.css
Ini lebih aneh, sih. Yang saya tau, npx
itu dipakai untuk eksekusi perintah tailwindcss build
. Mengolah file index.css
menjadi (-o
itu mungkin 'output') file bernama tailwind.css
.
Strukturnya jadi gini:
-inkos
-node_modules
-index.css
-index.html
-index.js
-package.json
-tailwind.css
-vue.js
-yarn.lock
lah, stylesnya belum masuk?
Masukin dulu stylesnya ke index.html
. Tapi jangan semua.
Cukup si tailwind.css
yang kita masukin. Di bagian paling bawah head, sebelum </head>
. Jadinya gini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tailwind.css">
</head>
<body>
<script src="vue.js"></script>
<script src="index.js"></script>
</body>
</html>
capek...
Susah juga ngoding sambil bikin artikel ya.
Masukin Vue
Akhirnya sampai sini juga. Ayo buat wadah untuk aplikasinya, di index.html
, di dalem <body>
.
<!-- index.html -->
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="index.js"></script>
</body>
<div>
yang ada id "app" nya itu, nanti bakal di-inject pakai script Vue.js. Sekarang kita inisiasi Vue di index.js
.
// index.js
new Vue({
el: '#app',
data(){
return {
title: 'Inkos'
}
}
})
-
new Vue
itu maksudnya kita bikin sebuah object baru dari Vue. Objectnya ribet deh pokoknya. Biar gampang, bayangin kalau itu kita bikin seekor makhluk, jenisnya 'vue'. -
el: '#app'
itu, si makhluk berjenis vue ini akan merasuki elemen HTML yang punya id (#) "app". Wadah yang kita buat diindex.html
tadi. -
data()
itu method/fungsi si makhluk vue. Method itu otomatis terpanggil sejak si vue ini masuk ke HTML, terus si vue mengeluarkan 'isi perutnya' alias data ke suatu tempat diindex.html
. Kalau kita panggil, datanya bisa muncul lho.title
itu kuncinya,Inkos
itu datanya.
Tes Tes Dicoba 123
Coba dobel klik file index.html
.
...
Pasti kosong, kan?
Ya emang kosong index.html
nya.
Coba isi wadahnya pakai kunci title
supaya datanya keluar. Bungkus kuncinya pakai 'double bracket' alias kumis-kumis. Gini nih:
...
<div id="app">{{ title }}</div>
...
Sekarang dobel klik lagi index.html
nya.
Wrap Up!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tailwind.css">
</head>
<body>
<div id="app">{{ title }}</div>
<script src="vue.js"></script>
<script src="index.js"></script>
</body>
</html>
// index.js
new Vue({
el: '#app',
data(){
return {
title: 'Inkos'
}
}
})
Sekian dulu ya, pembaca. Dadah.
Top comments (0)