Menyiapkan Proyek Vue.js Pertama Anda

Vue.js adalah kerangka kerja JavaScript progresif untuk membangun antarmuka pengguna dan aplikasi satu halaman. Kerangka kerja ini sangat fleksibel dan mudah diintegrasikan dengan pustaka lain atau proyek yang sudah ada. Panduan ini akan memandu Anda melalui langkah-langkah untuk menyiapkan proyek Vue.js pertama Anda menggunakan Vue CLI, alat yang hebat untuk membangun dan mengelola aplikasi Vue.

Prasyarat

Sebelum menyiapkan proyek Vue.js, pastikan Anda telah menginstal yang berikut ini di sistem Anda:

• Node.js dan npm: Vue.js mengharuskan Node.js dan npm (Node Package Manager) diinstal. Anda dapat mengunduhnya dari situs web resmi Node.js.

Langkah 1: Instal Vue CLI

Vue CLI (Command Line Interface) adalah alat yang membantu Anda membuat dan mengelola proyek Vue.js dengan mudah. ​​Untuk menginstal Vue CLI secara global di sistem Anda, buka terminal atau command prompt dan jalankan perintah berikut:

npm install -g @vue/cli

Perintah ini menginstal Vue CLI secara global, memungkinkan Anda mengakses perintah vue dari mana saja di terminal Anda.

Langkah 2: Buat Proyek Vue Baru

Setelah Vue CLI terinstal, Anda dapat membuat proyek Vue.js baru dengan menjalankan perintah berikut:

vue create my-vue-app

Anda akan diminta untuk memilih preset untuk proyek Anda. Anda dapat memilih preset default, yang mencakup Babel dan ESLint, atau memilih fitur secara manual seperti Vue Router, Vuex, TypeScript, dan lainnya. Untuk pemula, disarankan untuk memilih preset default dengan menekan Enter.

Vue CLI kemudian akan membuat folder baru bernama my-vue-app dan menyiapkan struktur proyek dengan semua file dan konfigurasi yang diperlukan.

Langkah 3: Navigasi ke Folder Proyek

Setelah proyek dibuat, navigasikan ke folder proyek menggunakan perintah berikut:

cd my-vue-app

Ini akan mengubah direktori kerja terminal Anda ke folder proyek Vue.js yang baru dibuat.

Langkah 4: Jalankan Server Pengembangan

Untuk melihat aplikasi Vue.js baru Anda beraksi, jalankan server pengembangan lokal dengan menjalankan:

npm run serve

Perintah ini akan memulai server pengembangan di http://localhost:8080 (atau port lain yang tersedia). Buka peramban web Anda dan navigasikan ke URL ini untuk melihat aplikasi Vue.js baru Anda.

Memahami Struktur Proyek

Setelah membuat proyek Vue.js baru, Anda akan melihat struktur proyek yang terorganisasi dengan baik. Berikut ini adalah file dan folder utama:

• src: Folder ini berisi kode sumber untuk aplikasi Vue.js Anda. Semua komponen, tampilan, dan gaya berada di sini.
• publik: Folder ini berisi aset statis seperti gambar, font, dan file index.html, yang berfungsi sebagai titik masuk untuk aplikasi Anda.
• src/main.js: Titik masuk utama untuk aplikasi Vue.js Anda. Berkas ini menginisialisasi instance Vue dan memasangnya ke DOM.
• src/App.vue: Komponen root aplikasi Anda. Anda dapat mengubah berkas ini untuk mengubah tata letak utama aplikasi Anda.
• src/components: Folder ini berisi contoh komponen Vue seperti HelloWorld.vue. Anda dapat menambahkan komponen baru di sini dan mengimpornya ke aplikasi Anda.

Langkah 5: Sesuaikan Aplikasi Anda

Anda dapat mulai menyesuaikan aplikasi Vue.js Anda dengan mengedit berkas App.vue dan membuat komponen baru. Berikut ini contoh komponen Vue sederhana:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Simpan perubahan Anda dan lihat hasilnya langsung di peramban Anda, berkat fitur hot-reload Vue.

Kesimpulan

Selamat! Anda telah berhasil menyiapkan proyek Vue.js pertama Anda dan mempelajari dasar-dasar cara membuat dan menjalankan aplikasi Vue. Dengan Vue CLI, Anda memiliki alat yang hebat untuk membantu Anda menyusun, mengembangkan, dan mengelola proyek Vue.js Anda. Dari sini, Anda dapat menjelajahi fitur yang lebih canggih seperti Vue Router untuk perutean, Vuex untuk manajemen status, dan Composition API untuk pengembangan yang lebih hebat dan fleksibel.