Kali ini aku akan membagikan cara menggunakan Vue JS. Bagi yang belum tahu Vue JS merupakan framework javascript yang cukup populer. Dengan Vue JS kita bisa membangun SPA (Single Page Application) dengan sangat mudah. Ikuti langkah-langkah yang akan jelaskan berikut ini untuk membuat project dengan Vue JS.
Sebelum mulai pastikan kita sudah punya direktori atau folder dengan nama Belajar Vue. Masuklah ke dalam folder itu lalu buat project Vue menggunakan vite. Vue memiliki dukungan penuh terhadap TypeScript, saat membuat project kita bisa memilih akan menggunakan java script atau typescript.
#menggunakan javascript
npm create vite@latest nama-aplikasi -- --template vue
#menggunakan TypeScript
npm create vite@latest nama-aplikasi -- --template vue-tsSebenarnya hampir mirip ya, jika menggunakan TypeScript kita hanya menambahkan -ts. Berikut ini contohnya ketika kita menjalakan perintah npm di atas.
Selanjutnya, jika kita telah berhasil ikuti instruksi yang ada pada terminal. Pertama masuk ke direktori belajar-vue-awal. Selanjutnya ketikkan perintah npm install untuk menginstall dependency yang diperlukan. Dan yang terakhir adalah menjalankan perintah npm run dev untuk menjalan project vue. Setelah berhasil menjalankan project kita akan mendapatkan tampilan seperti ini di terminal.
Jika kita perhatikan pada gambar di atas terdapat suatu url yaitu http://localhost:5173/. URL itulah yang akan menampilkan hasil aplikasi yang kita buat menggunakan vue js. Jika kita buka URL tersebut di atas, kita akan mendapatkan tampilan seperti berikut ini.
Memahami Cara Menggunakan Vue JS
Mari kita cermati bagaimana aplikasi vue bisa menampilkan tampilan tersebut. Kita lihat dulu struktur direktori pada project vue.
Pada saat kita mengakses http://localhost:5173/ vue sebenarnya membaca index.html. Isi dari index.html di vue adalah sebagai berikut.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>Perhatikan script html di atas pada bagian body. Terdapat 2 component yaitu <div id=”app”></div> dan <script type=”module” scr=”/src/main.ts”></script>. 2 komponen ini sangat penting dalam menggunakan vue js. Mari kita lihat script ts yang ada di “/src/main.ts”.
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')Pada script di atas terdapat script createApp(App).mount(‘#app’), artinya App.vue akan dipasangkan ke component <div id=”app”></div>. Lantas, apa sebenarnya isi dari App.vue? Mari kita lihat scripnya.
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
Jika kita lihat pada script di atas kita mendapatkan 3 component utama. yaitu:
- <script setup lang=”ts”></script> digunakan untuk menyimpan TypeScript yang kita buat. Seandainya kita menggunakan JavaScript maka ubah lang=”ts” menjadi lang=”js”
- <template></template> digunakan untuk menyimpan body html.
- <style scoped></style> digunakan untuk menyimpan css style untuk html yang ada pada template.
Sekarang mari kita lihat lagi pada bagian script. Di sana terdapat kode program yang digunakan untuk mengimport component vue, yaitu: import HelloWorld from ‘./components/HelloWorld.vue’. Komponent vue yang diimport tersebut digunakan ada template layaknya elemen html yaitu: <HelloWorld msg=”Vite + Vue” />.
Jadi di sinilah kelebihan ketika kita menggunakan vue js. Dengan vue js kita bisa membuat komponen yang terisolasi pada file vue. Komponen terisolasi ini bisa memiliki body, style dan script yang tidak terpengaruh dengan komponen lain. Untuk menggunakan component kita tinggal menggunakannya layaknya element html dengan attributenya.
Penutup
Nah, demikianlah cara menggunakan vue js. Semoga tulisan ini bermanfaat. Selanjutnya kita akan belajar bagaimana sih caranya membuat komponen di vue js.
