Hızlı Başlangıç ​

Vue'yu Çevrimiçi Deneyin ​

• Vue'yu hızlıca tatmak için, doğrudan Playground üzerinden deneyebilirsiniz.

• Herhangi bir derleme adımı olmadan düz bir HTML kurulumunu tercih ederseniz, başlangıç noktanız olarak bu JSFiddle'ı kullanabilirsiniz.

• Node.js'e ve derleme araçları konseptine zaten aşinaysanız, doğrudan tarayıcınızın içinde, StackBlitz üzerinde eksiksiz bir derleme kurulumunu da deneyebilirsiniz.

• Önerilen kurulumun bir incelemesi için, size ilk Vue uygulamanızı nasıl çalıştıracağınızı, düzenleyeceğinizi ve dağıtacağınızı gösteren bu etkileşimli Scrimba eğitimini izleyebilirsiniz.

Bir Vue Uygulaması Oluşturmak ​

Bu bölümde, yerel makinenizde bir Vue Tek Sayfalı Uygulama (Single Page Application) taslağını nasıl oluşturacağınızı tanıtacağız. Oluşturulan proje, Vite tabanlı bir derleme kurulumunu kullanacak ve Vue Tek Dosyalı Bileşenler (Single-File Components) kullanmamıza olanak tanıyacaktır.

Güncel bir Node.js sürümünün yüklü olduğundan ve mevcut çalışma dizininizin projeyi oluşturmak istediğiniz dizin olduğundan emin olun. Komut satırınızda aşağıdaki komutu (baştaki $ işareti olmadan) çalıştırın:

$ npm create vue@latest

$ pnpm create vue@latest

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

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

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

$ bun create vue@latest

Bu komut, resmi Vue proje iskeleti oluşturma aracı olan create-vue'yu yükleyecek ve çalıştıracaktır. TypeScript ve test desteği gibi çeşitli isteğe bağlı özellikler için size birtakım sorular sunulacaktır:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Eğer bir seçenekten emin değilseniz, şimdilik enter tuşuna basarak No seçeneğini onaylayabilirsiniz. Proje oluşturulduktan sonra, bağımlılıkları yüklemek ve geliştirme sunucusunu (dev server) 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 projeniz çalışıyor olmalı! Oluşturulan projedeki örnek bileşenlerin, Options API (Seçenekler API'si) yerine Composition API (Bileşim API'si) ve <script setup> kullanılarak yazıldığına dikkat edin. İşte bazı ek ipuçları:

• Önerilen IDE kurulumu Visual Studio Code + Vue - Official extension'dır (Resmi Eklenti). Eğer diğer editörleri kullanıyorsanız, IDE desteği bölümüne göz atın.
• Arka uç (backend) framework'leriyle entegrasyon da dahil olmak üzere araçlarla (tooling) ilgili daha fazla detay, Araçlar Kılavuzu'nda tartışılmıştır.
• Altta yatan derleme aracı Vite hakkında daha fazla bilgi edinmek için Vite dokümanlarına göz atın.
• Eğer TypeScript kullanmayı seçerseniz, TypeScript Kullanım Kılavuzu'na göz atın.

Uygulamanızı üretime (production) taşımaya hazır olduğunuzda, aşağıdakileri çalıştırın:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

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

Sonraki Adımlar >

Vue'yu CDN'den Kullanmak ​

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

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

Burada unpkg kullanıyoruz, ancak npm paketleri sunan herhangi bir CDN'yi (örneğin jsdelivr veya cdnjs) de kullanabilirsiniz. Elbette bu dosyayı indirip kendiniz de sunabilirsiniz.

Vue'yu bir CDN'den kullanırken işin içine bir "derleme adımı" girmez. Bu, kurulumu çok daha basit hale getirir ve statik HTML'yi geliştirmek veya bir arka uç framework'ü ile entegre olmak için uygundur. Ancak, Tek Dosyalı Bileşen (SFC) sözdizimini (syntax) kullanamazsınız.

Global Derlemeyi Kullanmak ​

Yukarıdaki bağlantı, tüm üst düzey API'lerin global Vue nesnesi üzerinde özellikler (properties) olarak sunulduğu Vue global derlemesini yükler. İşte global derlemeyi kullanan eksiksiz 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: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

ES Modülü Derlemesini Kullanmak ​

Dokümantasyonun geri kalanı boyunca, öncelikle ES modülleri sözdizimini kullanacağız. Çoğu modern tarayıcı artık ES modüllerini yerel (native) olarak desteklemektedir, bu nedenle Vue'yu bir CDN'den yerel ES modülleri aracılığıyla ş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: 'Hello 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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

<script type="module"> kullandığımıza ve içe aktarılan CDN URL'sinin bunun yerine Vue'nun ES modülleri derlemesini işaret ettiğine dikkat edin.

Import Maps'i Etkinleştirmek ​

Yukarıdaki örnekte tam CDN URL'sinden import yapıyoruz, ancak dokümantasyonun geri kalanında şuna benzer kodlar göreceksiniz:

import { createApp } from 'vue'

Import Maps (İçe Aktarma Haritaları) kullanarak tarayıcıya vue içe aktarımını nerede bulacağını öğretebiliriz:

<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: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Ayrıca içe aktarma haritasına diğer bağımlılıklar için kayıtlar da ekleyebilirsiniz - ancak bunların, kullanmayı planladığınız kütüphanenin ES modülleri sürümünü işaret ettiğinden emin olun.

Modülleri Bölmek ​

Kılavuzda derinleştikçe, kodumuzu yönetilmesi daha kolay olacak şekilde ayrı JavaScript dosyalarına bölmemiz gerekebilir. Örneğin:

<div id="app"></div>

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

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

export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}

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

Yukarıdaki index.html dosyasını doğrudan tarayıcınızda açarsanız, bir hata verdiğini göreceksiniz; çünkü ES modülleri file:// protokolü üzerinden çalışamaz. Bu protokol, tarayıcının yerel bir dosyayı 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'deki sayfaları açarken kullandığı protokoldür. ES modüllerinin yerel makinemizde çalışabilmesi için, index.html dosyasını http:// protokolü üzerinden yerel bir HTTP sunucusu ile sunmamız (serve etmemiz) gerekir.

Yerel bir HTTP sunucusu başlatmak için öncelikle Node.js'in yüklü olduğundan emin olun, ardından HTML dosyanızla aynı dizinde komut satırından npx serve komutunu çalıştırın. Doğru MIME türlerine sahip statik dosyaları sunabilen başka herhangi bir HTTP sunucusu da kullanabilirsiniz.

İçe aktarılan bileşenin (component) şablonunun (template) satır içi (inlined) bir JavaScript dizesi (string) olarak bulunduğunu fark etmiş olabilirsiniz. Eğer VS Code kullanıyorsanız, es6-string-html eklentisini yükleyebilir ve bu dizeler için sözdizimi vurgulaması (syntax highlighting) almak üzere onların başına bir /*html*/ yorumu ekleyebilirsiniz.

Sonraki Adımlar ​

Eğer Giriş bölümünü atladıysanız, dokümantasyonun geri kalanına geçmeden önce onu okumanızı şiddetle tavsiye ederiz.