Vue Academy · Ders

CLI Yapılandırması ve Eklentiler

CLI'yi yapılandırın ve projenizi genişletmek için eklentiler ekleyin.

CLI Yapılandırması ve Eklentiler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. 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.

Derlemenizi Yapılandırma

Hem Vue CLI hem de Vite, yapılandırma dosyası aracılığıyla derlemeyi özelleştirmenize olanak tanır.

Vue CLI, vue.config.js kullanır
Vite, vite.config.js kullanır

Eklentileri burada ekleyebilir, takma adlar belirleyebilir, geliştirme sunucusunu yapılandırabilir ve daha fazlasını yapabilirsiniz.

vite.config.js Temelleri

Tipik bir vite.config.js dosyası, Vue eklentisini içe aktarır ve bir yapılandırma nesnesi dışa aktarır.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

vue.config.js Temelleri

Vue CLI projelerinde vue.config.js, yapılandırmayı aynı şekilde dışa aktarır.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Eklenti Ekleme

Eklentiler, yeni yetenekler ekleyerek derlemeyi genişletir.

npm ile yükleyin
Yapılandırma dosyasına içe aktarın
Eklentiler dizisine ekleyin

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Ortam Değişkenleri

Ortamlar arasında değişen yapılandırmaları .env dosyalarında depolayın.

.env her yerde yüklenir
.env.development yalnızca geliştirme için kullanılır
.env.production üretim derlemeleri için kullanılır

Ortam Değişkenlerini Tanımlama

Vite'ta değişkenlerin istemci kodunuza açılabilmesi için VITE_ ön ekiyle başlaması gerekir.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Ortam Değişkenlerini Okuma

Açığa çıkarılan değişkenlere Vite'ta import.meta.env aracılığıyla erişin.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Ortam Değişkenleri İçin Güvenlik Notu

İstemci koduna açılan her şey tarayıcıda görünür.

Özel API anahtarları gibi gizli bilgileri VITE_ değişkenlerine asla koymayın
Buraya yalnızca herkese açık ve hassas olmayan yapılandırmaları koyun
Gerçek gizli bilgileri sunucuda tutun

Yol Takma Adları

Bir takma ad, içe aktarma yollarını kısaltır. Yaygın kullanılan takma adlardan biri, @ işaretini src klasörüyle eşler.

Bu sayede ../../components gibi kırılgan göreli yollardan kaçınırsınız.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Takma Adı Kullanma

Yapılandırma tamamlandıktan sonra göreli yollar yerine @/ ile içe aktarın.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Geliştirme Sunucusu Seçenekleri

Yapılandırma dosyası, geliştirme sunucusunu da ayarlar:

port hangi bağlantı noktasının dinleneceği
open tarayıcının otomatik olarak açılması
proxy CORS sorununu önlemek için API isteklerinin iletilmesi

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Hızlı Kontrol

Vite yapılandırmasını ne kadar anladığınızı test edin.

Özet: Yapılandırma ve Eklentiler

Bir Vue projesini yapılandırmayı öğrendiniz:

vite.config.js veya vue.config.js ayarları barındırır
plugins dizisine eklenti ekleyin
VITE_ ön ekini taşıyan .env dosyalarını kullanın
Bunları import.meta.env aracılığıyla okuyun
Düzenli içe aktarmalar için @ takma adını ayarlayın

Sıradaki konu: şablon söz dizimi ve veri bağlama.

Sıkça Sorulan Sorular

“CLI Yapılandırması ve Eklentiler” dersi ücretsiz mi?

Evet — “CLI Yapılandırması ve Eklentiler” 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.

“CLI Yapılandırması ve Eklentiler” dersinde ne öğreneceğim?

CLI'yi yapılandırın ve projenizi genişletmek için eklentiler ekleyin. 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 3. dersidir.

“CLI Yapılandırması ve Eklentiler” 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 CLI Kurulumu
Oluşturulan Proje Yapısı
CLI Yapılandırması ve Eklentiler

← Vue Academy Sayfasına Dön