Membuat Kerangka Aplikasi Vue.js Dengan Parcel

« Back to blog index

Halo! Kali ini saya akan mengajarkan kamu untuk mempersiapkan kerangka aplikasi Vue.js dengan Parcel. Sebelum kita mulai, saya akan menjelaskan terlebih dahulu apa itu Parcel. Dan sebagai catatan, fokus saya di tulisan ini bukan ke sisi Vue.js, bukan panduan bagaimana cara membuat aplikasi dengan Vue.js atau konsep-konsep dasar Vue.js.

Parcel adalah sebuah bundler, yang bisa kamu gunakan tanpa konfigurasi apapun. Tujuan dari bundler adalah menggabungkan modules yang kamu tulis menjadi static files yang bisa dibaca oleh browser.

Sebenarnya juga ada banyak pilihan bundler yang bisa kamu gunakan seperti Webpack, rollup.js, Browserify dan lain-lain. Kenapa kita belajar Parcel terlebih dahulu? Karena Parcel adalah bundler yang paling mudah digunakan oleh orang yang belum pernah tahu/menggunakan bundler (IMO).

Kamu bisa install Parcel dengan cara:

npm install -g parcel-bundler

Selanjutnya kita siapkan folder untuk aplikasi kita dan install dependencies

mkdir vue-with-parcel && cd vue-with-parcel
npm init -y && npm install vue

Okay sekarang kita sudah siap menulis coding, siapkan beberapa file seperti di contoh berikut:

.
├── index.html
└── src
    ├── App.vue
    └── main.js

Jika kamu perhatikan struktur file di atas, kita menggunakan salah satu tool yang sudah disediakan oleh Vue.js dengan nama Single File Components (extension: *.vue). File ini nantinya akan di-build menjadi file yang bisa dibaca browser oleh Parcel.

Setelah semua file sudah kamu buat, silakan tulis "Hello world" app pada Vue.js sebagai berikut:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue with Parcel</title>
</head>
<body>
  <div id="app"></div>
  <script src="/src/main.js"></script>
</body>
</html>

src/App.vue:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
    };
  },
};
</script>

<style scoped>
</style>

src/main.js:

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

Selanjutnya, jalankan perintah berikut di terminal:

parcel index.html

Output:

Server running at http://localhost:1234
✨ Built in 2.04s.

Build sudah selesai! Sekarang kamu bisa buka di browser dengan alamat http://localhost:1234.

Vue with Parcel


One more thing...

Jika kamu perhatikan folder kamu sekarang, akan ada 2 folder tambahan yaitu dist dan .cache. Folder dist untuk menyimpan hasil buildnya dan folder .cache untuk menyimpan cache milik Parcel agar build berikutnya tidak terlalu memakan waktu. 2 folder ini harus kamu ignore dari Version Control (Git/Mercurial/SVN).

Selamat! Kamu telah berhasil membuat kerangka aplikasi Vue.js.

Happy coding! ^^


« Back to blog index