Hızlı Başlangıç

Vue'yu Çevrimiçi Deneyin

Vue'yi hızlı bir şekilde denemek için Playground sayfasında doğrudan deneyebilirsiniz.
Eğer herhangi bir yapı adımına ihtiyaç duymadan düz bir HTML kurulumu tercih ediyorsanız, başlangıç noktası olarak bu JSFiddle sayfasını kullanabilirsiniz.
Node.js ve yapı araçları kavramlarına aşina iseniz, tarayıcınızda StackBlitz üzerinden tam bir yapı kurulumu deneyebilirsiniz.

Vue Uygulaması Oluşturma

Ön Koşullar

Komut satırına aşina olun
Node.js sürüm 18.3 veya üstünü yükleyin

Bu bölümde, yerel makinenizde Vue Tek Sayfa Uygulaması oluşturmayı tanıtacağız. Oluşturulan proje, Vite temel alınarak bir yapı kurulumu kullanacak ve bize Vue Tek Dosya Bileşenlerini (SFC'ler) kullanma olanağı tanıyacak.

Güncel bir Node.js sürümünün yüklü olduğundan ve mevcut çalışma dizininizin bir proje oluşturmayı planladığınız dizin olduğundan emin olun. Komut satırında aşağıdaki komutu çalıştırın ( $ işareti olmadan):

$ npm create vue@latest

$ pnpm create vue@latest

# Yarn için (v1+)
$ yarn create vue

# Modern Yarn için (v2+)
$ yarn create vue@latest

# Yarn ^v4.11 için
$ yarn dlx create-vue@latest

$ bun create vue@latest

Bu komut, resmi Vue proje yapılandırma aracı olan create-vue aracını yükleyip çalıştıracaktır. Size, TypeScript ve test desteği gibi birkaç isteğe bağlı özellik için yönlendirmeler sunulacaktır:

✔ Proje adı: … <your-project-name> ✔ TypeScript ekleyelim mi? … Hayır / Evet ✔ JSX desteği ekleyelim mi? … Hayır / Evet ✔ Tek Sayfa Uygulaması geliştirmek için Vue Router ekleyelim mi? … Hayır / Evet ✔ Durum yönetimi için Pinia ekleyelim mi? … Hayır / Evet ✔ Birim testi için Vitest ekleyelim mi? … Hayır / Evet ✔ Uçtan Uca Test Çözümü ekleyelim mi? … Hayır / Cypress / Nightwatch / Playwright ✔ Kod kalitesi için ESLint ekleyelim mi? … Hayır / Evet ✔ Kod biçimlendirmesi için Prettier ekleyelim mi? … Hayır / Evet ✔ Hata ayıklama için Vue DevTools 7 uzantısını ekleyelim mi? (deneysel) … Hayır / Evet

Bir seçenek hakkında emin değilseniz, şu anda sadece Hayır seçeneğini vurgulayarak enter tuşuna basabilirsiniz. Proje oluşturulduktan sonra, bağımlılıkları yüklemek ve geliştirme sunucusunu başlatmak için talimatları izleyin:

$ cd {{'<your-project-name>'}}
$ npm install
$ npm run dev

$ cd {{'<your-project-name>'}}
$ pnpm install
$ pnpm run dev

$ cd {{'<your-project-name>'}}
$ yarn
$ yarn dev

$ cd {{'<your-project-name>'}}
$ bun install
$ bun run dev

Artık ilk Vue projenizin çalışır durumda olduğunu görmelisiniz! Oluşturulan projedeki örnek bileşenlerin Composition API ve `kullanılarak yazıldığını unutmayın;Options API` yerine. İşte bazı ek ipuçları:

Önerilen IDE kurulumu Visual Studio Code + Vue - Resmi uzantı. Diğer editörleri kullanıyorsanız, IDE destek bölümü ile göz atın.
Araçlar hakkında daha fazla detay, arka uç çerçeveleriyle entegrasyon gibi konular, Araçlar Kılavuzu kısmında ele alınmıştır.
Temel yapı aracı Vite hakkında daha fazla bilgi için Vite dökümantasyonu sayfasını ziyaret edin.
TypeScript kullanmayı seçerseniz, TypeScript Kullanım Kılavuzu sayfasına göz atın.

Uygulamanızı üretime göndermeye hazır olduğunuzda, aşağıdaki komutu çalıştırın:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

Bu, uygulamanızın proje içindeki ./dist dizininde üretime hazır bir derlemesini oluşturacaktır. Uygulamanızı üretime göndermeye daha fazla bilgi edinmek için Üretim Dağıtım Kılavuzu sayfasına göz atın.

Sonraki Adımlar >

Vue'yu CDN'den Kullanma

Vue'yu doğrudan bir CDN'den bir script etiketi aracılığıyla kullanabilirsiniz:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Burada unpkg kullanıyoruz, fakat ayrıca npm paketlerini sunan herhangi bir CDN'yi kullanabilirsiniz, örneğin jsdelivr veya cdnjs. Elbette, bu dosyayı indirip kendiniz de sunabilirsiniz.

Vue'yu bir CDN üzerinden kullanırken, herhangi bir "yapı adımı" içermez. Bu, kurulumu çok daha basit hale getirir ve statik HTML'yi geliştirmek veya bir arka uç çerçevesiyle entegre etmek için uygundur. Ancak, Tek Dosya Bileşeni (SFC) sözdizimini kullanamayacaksınız.

Küresel Yapıyı Kullanma

Yukarıdaki bağlantı, Vue'nin küresel yapısını yükler; burada tüm üst seviye API'ler küresel Vue nesnesi üzerinde özellikler olarak açık hale gelir. İşte küresel yapı kullanarak tam bir örnek:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Merhaba Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Merhaba vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

ipucu

Kılavuzun birçok yerinde Composition API örnekleri `sözdizimini kullanacaktır; bu, yapı araçları gerektirir. Eğer yapı adımı olmadan Composition API kullanmayı planlıyorsanız,setup() seçeneği kullanımına göz atın.

ES Modül Yapısını Kullanma

Kılavuz boyunca, genellikle ES modüllerini kullanacağız. Çoğu modern tarayıcı artık ES modüllerini yerel olarak desteklediğinden, Vue'yu CDN üzerinden yerel ES modülleriyle şu şekilde kullanabiliriz:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Merhaba Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Merhaba Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Görünüşe göre, `` kullanıyoruz ve içe aktarılan CDN URL'si Vue'nin ES modüller yapısına işaret ediyor.

CodePen Demo >

İçe Aktarma Haritalarını Etkinleştirme

Yukarıdaki örnekte, tam CDN URL'sinden içe aktarıyoruz, ancak belgelerin geri kalanında aşağıdaki gibi kod göreceksiniz:

import { createApp } from 'vue'

Tarayıcıya vue içe aktarımlarını nasıl bulması gerektiğini öğretmek için İçe Aktarma Haritalarını kullanabiliriz:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Merhaba Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Merhaba Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

Diğer bağımlılıklar için de bir başlangıç haritasına girişler ekleyebilirsiniz; ancak bunların kullandığınız kütüphanenin ES modüller sürümüne işaret ettiğinden emin olun.

İçe Aktarma Haritaları Tarayıcı Desteği

İçe aktarma haritaları, nispeten yeni bir tarayıcı özelliğidir. Lütfen bir tarayıcının destek aralığında olup olmadığını kontrol edin. Özellikle, sadece Safari 16.4+ sürümünde desteklenmektedir.

Üretim Kullanımı için Notlar

Şu ana kadar kullandığımız örnekler, Vue'nun geliştirme sürümünü kullanıyor - eğer Vue'yu bir CDN üzerinden üretimde kullanmayı planlıyorsanız, Üretim Dağıtım Kılavuzu sayfasını kontrol ettiğinizden emin olun.

Vue'yu bir yapı sistemi olmadan kullanmak mümkün olsa da, vuejs/petite-vue kullanmak, jquery/jquery (geçmişte) veya alpinejs/alpine (şu anda) kullanılıyor olabileceği bağlamda daha uygun bir yaklaşım olabilir.

Modülleri Bölme

Kılavuzda daha derinlemesine ilerledikçe, kodumuzu yönetimi daha kolay olacak şekilde ayrı JavaScript dosyalarına bölebiliriz. Örnek olarak:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count: {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count: {{ count }}</div>`
}

Yukarıdaki index.html dosyasını doğrudan tarayıcınızda açarsanız, file:// protokolü üzerinden ES modüllerinin çalışmadığına dair bir hata alırsınız; bu, tarayıcının yerel bir dosya açtığında kullandığı protokoldür.

Güvenlik nedenleriyle, ES modülleri yalnızca http:// protokolü üzerinden çalışabilir; bu, tarayıcıların web üzerindeki sayfaları açarken kullandığı protokoldür. ES modüllerinin yerel makinemizde çalışabilmesi için, index.html dosyasını internet üzerinden sunmamız gerekiyor; bu, yerel bir HTTP sunucusu ile gerçekleştirilebilir.

Yerel bir HTTP sunucusunu başlatmak için, öncelikle Node.js yüklü olduğundan emin olun, ardından komut satırında HTML dosyanızın bulunduğu dizinde npx serve komutunu çalıştırın. Statik dosyaları doğru MIME türleri ile sunabilen başka herhangi bir HTTP sunucusunu da kullanabilirsiniz.

İçe aktarılan bileşenin şablonunun JavaScript dizesi olarak satır içi olduğunu fark etmiş olabilirsiniz. Eğer VS Code kullanıyorsanız, es6-string-html uzantısını yükleyebilir ve dizeleri /*html*/ yorumu ile ön ekleyerek sözdizimi renklendirmesi elde edebilirsiniz.

Sonraki Adımlar

Eğer Giriş bölümünü atladıysanız, diğer belgelere geçmeden önce onu okumanızı şiddetle tavsiye ederiz.

Rehberle Devam Et
Bu rehber, çerçevenin her yönünü detaylı bir şekilde anlatmaktadır.


Eğitimi Deneyin
Herhangi bir şeyleri pratik olarak öğrenmeyi tercih edenler için.


Örnekleri Kontrol Edin
Temel özelliklerin ve yaygın kullanıcı arayüzü görevlerinin örneklerine göz atın.