Vue Academy · Ders

Oluşturulan Proje Yapısı

Bir Vue projesinin oluşturduğu dosya ve klasörleri inceleyin.

Oluşturulan Proje Yapısı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Projeyi Tanıyalım

İskeleti oluşturulmuş bir Vue projesi, öngörülebilir bir klasör düzenine sahiptir.

src/ uygulamanızın kaynak kodu
public/ olduğu gibi sunulan statik varlıklar
package.json bağımlılıklar ve betikler
index.html Vue'nun bağlandığı sayfa

Dosyaların nerede bulunduğunu bilmek, projede hızlıca gezinmenize yardımcı olur.

src Klasörü

src/ klasörü, yazdığınız her şeyi barındırır.

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

main.js Giriş Noktası

main.js, uygulamanın başlatıldığı yerdir. Uygulamayı oluşturur ve ona bağlanır.

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

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

App.vue Kök Bileşeni

App.vue, kök bileşendir. Diğer tüm bileşenler onun içinde yer alır.

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

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

components Klasörü

components/ klasörü, yeniden kullanılabilir Tek Dosyalı Bileşenleri barındırır.

Her .vue dosyası bir bileşendir
Bileşenleri ihtiyaç duyduğunuz yerlerde içe aktarın
Uygulama büyüdükçe alt klasörler içinde düzenleyin

public Klasörü

public/ klasörü, derleme çıktısına olduğu gibi kopyalanan statik dosyaları barındırır.

Buradaki dosyeler paketleyici tarafından işlenmez
favicon'lar, robots.txt veya sabit varlıklar için kullanın
Bunlara kökten başlayan mutlak yollarla başvurun

index.html Bağlantı Noktası

index.html, tek HTML sayfasıdır. Bağlanma hedefini içerir.

<!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, projenizi ve bağımlılıklarını açıklar.

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

package.json Betikleri

scripts bölümü, npm run ile çalıştırdığınız komutları tanımlar.

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

assets ve public

Statik dosyaları depolamanın iki yolu vardır:

src/assets/, paketleyici tarafından işlenir, önbelleğe alma için özetlenir ve kod içinde içe aktarılır
public/, olduğu gibi kopyalanır ve sabit bir yolla başvurulur

İçe aktardığınız şeyler için assets'i, sabit bir URL'yi koruması gereken şeyler için public'i kullanın.

Birlikte Nasıl Çalışırlar?

Uygulama yüklenirken gerçekleşen akış:

Tarayıcı index.html dosyasını yükler
Bir modül betiği etiketi aracılığıyla main.js dosyasını çalıştırır
main.js, App.vue dosyasını #app içine bağlar
App.vue, alt bileşenleri oluşturur

Hızlı Kontrol

Proje yapısı hakkındaki bilginizi test edin.

Özet: Proje Yapısı

Bir Vue projesinin düzenini incelediniz:

src/ kodunuzu barındırır
main.js uygulamayı başlatır
App.vue kök bileşendir
components/ yeniden kullanılabilir parçaları barındırır
public/ ve index.html statik içerik sunar
package.json bağımlılıkları ve betikleri tanımlar

Sıradaki konu: CLI'yi yapılandırmak ve eklentiler eklemek.

Sıkça Sorulan Sorular

“Oluşturulan Proje Yapısı” dersi ücretsiz mi?

Evet — “Oluşturulan Proje Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Oluşturulan Proje Yapısı” dersinde ne öğreneceğim?

Bir Vue projesinin oluşturduğu dosya ve klasörleri inceleyin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Oluşturulan Proje Yapısı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön