Vue Academy · Ders

Vue CLI Kurulumu

Yeni projeler oluşturmak için Vue CLI'yi kurun ve kullanın.

Vue CLI Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. 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.

Vue CLI nedir?

Vue CLI, Vue projeleri için iskelet oluşturmaya ve projeleri yönetmeye yarayan klasik komut satırı aracıdır.

Uygun varsayılanlarla projeler oluşturur
Eklentiler aracılığıyla derleme yapılandırmasını yönetir
webpack üzerine kuruludur

Yıllarca standart araç olarak kullanıldı; ancak günümüzde Vue, Vite'ı tercih etmektedir.

Vue CLI'yi Global Olarak Yükleme

CLI'yi global olarak yükleyin; böylece vue komutu her yerde kullanılabilir.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Proje Oluşturma

Yeni bir proje iskeleti oluşturmak için vue create komutunu kullanın. Bu komuta bir proje adı verirsiniz.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Ön Ayarları Seçme

CLI sizden bir ön ayar seçmenizi ister:

Varsayılan, hızlı seçenek olarak Babel ve ESLint'i sağlar
Özellikleri manuel olarak seç seçeneği Router, Vuex, TypeScript, test ve daha fazlasını eklemenizi sağlar

Ön ayarlar kaydedilebilir ve gelecekteki projelerde yeniden kullanılabilir.

Özellikleri Manuel Olarak Seçme

Manuel seçimi tercih ettiğinizde, istediğiniz özellikleri etkinleştirip devre dışı bırakırsınız.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Projeyi Çalıştırma

Oluşturma işleminden sonra CLI, uygulamanızı başlatmak için çalıştırmanız gereken komutları yazdırır.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Vite'a Geçiş

Vite, Vue ekibi tarafından oluşturulan modern derleme aracıdır.

Anında başlatma için yerel ES modüllerini kullanır
Son derece hızlı Hot Module Replacement sağlar
webpack tabanlı Vue CLI'den çok daha hızlıdır

Vite artık yeni Vue projeleri için önerilen araçtır.

Vite ve Vue CLI Karşılaştırması

İki aracın karşılaştırması:

Vue CLI, webpack kullanır; soğuk başlangıcı daha yavaştır, olgun ve yapılandırılabilirdir
Vite, esbuild ve yerel ESM kullanır; neredeyse anında başlar ve bundan sonra varsayılan araç olacaktır

Vue CLI artık bakım modundadır. Eski bir projeyi sürdürmüyorsanız Vite'ı tercih edin.

npm create vue@latest

Vite destekli yeni bir Vue projesi başlatmanın resmî yolu create-vue aracıdır.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

create-vue Projesini Çalıştırma

create-vue, standart Vite betiklerini kullanır.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Hangisini Kullanmalısınız?

Seçim yapma konusunda rehber:

2024'te veya daha sonra sıfırdan mı başlıyorsunuz? npm create vue@latest (Vite) kullanın
Vue CLI ile oluşturulmuş eski bir projeyi mi sürdürüyor musunuz? Kullanmaya devam edin
En hızlı geliştirme deneyimini mi istiyorsunuz? Vite kazanır

Hızlı Kontrol

Vue araçları arasındaki seçimleri ne kadar anladığınızı test edin.

Özet: Vue CLI Kurulumu

Vue için iskelet oluşturma araçlarını öğrendiniz:

Vue CLI, npm install -g @vue/cli komutuyla yüklenir
vue create, ön ayarlarla proje iskeleti oluşturur
Vite, modern ve hızlı alternatiftir
npm create vue@latest, önerilen modern başlangıç yöntemidir

Sıradaki konu: oluşturulan proje yapısını incelemek.

Sıkça Sorulan Sorular

“Vue CLI Kurulumu” dersi ücretsiz mi?

Evet — “Vue CLI Kurulumu” 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.

“Vue CLI Kurulumu” dersinde ne öğreneceğim?

Yeni projeler oluşturmak için Vue CLI'yi kurun ve kullanın. 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 1. dersidir.

“Vue CLI Kurulumu” 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