Vue Academy · Pelajaran

Struktur Proyek yang Dihasilkan

Kenali file dan folder yang dihasilkan oleh proyek Vue.

Struktur Proyek yang Dihasilkan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Menjelajahi Proyek

Proyek Vue yang dibuat dengan kerangka memiliki tata letak direktori yang mudah diprediksi.

src/ kode sumber aplikasi Anda
public/ aset statis yang disajikan apa adanya
package.json dependensi dan skrip
index.html halaman tempat Vue dipasang

Mengetahui lokasi berbagai hal membantu Anda menjelajah dengan cepat.

Direktori src

Direktori src/ berisi semua hal yang Anda tulis.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

Titik Masuk main.js

main.js adalah tempat aplikasi dimulai. Berkas ini membuat aplikasi dan memasangnya.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

Komponen Akar App.vue

App.vue adalah komponen akar. Semua komponen lainnya berada di dalamnya.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

Direktori components

Direktori components/ berisi Komponen Satu Berkas yang dapat digunakan kembali.

Setiap berkas .vue adalah satu komponen
Impor komponen tersebut di tempat yang membutuhkannya
Atur ke dalam subdirektori seiring bertumbuhnya aplikasi

Direktori public

Direktori public/ berisi berkas statis yang disalin apa adanya ke hasil pembangunan.

Berkas di sini tidak diproses oleh alat penggabung
Gunakan direktori ini untuk ikon situs, robots.txt, atau aset tetap
Rujuk berkas tersebut dengan jalur absolut dari akar

Titik Pemasangan index.html

index.html adalah satu-satunya halaman HTML. Berkas ini berisi target pemasangan.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.json menjelaskan proyek dan dependensinya.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Skrip package.json

Bagian skrip menentukan perintah yang Anda jalankan dengan npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Aset vs public

Dua cara untuk menyimpan berkas statis:

src/assets/ diproses oleh alat penggabung, diberi hash untuk penyimpanan sementara, dan diimpor dalam kode
public/ disalin apa adanya dan dirujuk melalui jalur tetap

Gunakan aset untuk hal-hal yang Anda impor, dan gunakan public untuk hal-hal yang harus mempertahankan URL stabil.

Cara Kerjanya Bersama

Alur saat aplikasi dimuat:

Peramban memuat index.html
Peramban menjalankan main.js melalui tag skrip modul
main.js memasang App.vue ke dalam #app
App.vue menampilkan komponen anak

Pemeriksaan Singkat

Uji pengetahuan Anda tentang struktur proyek.

Rangkuman: Struktur Proyek

Anda telah menjelajahi tata letak proyek Vue:

src/ berisi kode Anda
main.js memulai aplikasi
App.vue adalah komponen akar
components/ berisi bagian yang dapat digunakan kembali
public/ dan index.html menyajikan konten statis
package.json menentukan dependensi dan skrip

Berikutnya: mengonfigurasi CLI dan menambahkan pengaya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur Proyek yang Dihasilkan” gratis?

Ya — teks lengkap “Struktur Proyek yang Dihasilkan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Struktur Proyek yang Dihasilkan”?

Kenali file dan folder yang dihasilkan oleh proyek Vue. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Struktur Proyek yang Dihasilkan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Instalasi Vue CLI
Struktur Proyek yang Dihasilkan
Konfigurasi CLI dan Plugin

← Kembali ke Vue Academy