Guide

Kurulum

Uyumluluk

Vue, IE8 ve daha önceki versiyonları desteklememektedir zira ECMAScript 5’in IE8 için ayar katmanı gerçekleştirilemeyecek özelliklerini kullanır. Fakat ECMAScript 5 ile uyumlu tarayıcıların tamamını desteklemektedir.

Sürüm Detayları

En son stabil versiyon: 2.06.2010

Her versiyona ait detaylı sürüm detayları GitHub üzerinde bulunabilir.

Vue Devtools

Vue’yi kullanırken aynı zamanda Vue uygulamalarınızı daha kullanıcı-dostu bir arayüz ile incelemenizi ve hata gidermenizi sağlamak üzere tarayıcınıza Vue Devtools eklentisini eklemenizi tavsiye ederiz.

Doğrudan <script> Etiketiyle Kullanma

Bilgisayarınıza indirin ve bir script HTML etiketi ile basit bir şekilde projelerinize dahil edin. Vue global bir değişken olarak kaydedilecektir.

Geliştirme sürecinde küçültülmüş versiyonu kullanmayın. Aksi takdirde sıkça rastlanan hatalara yönelik yararlı ikazları göremeyeceksiniz!


Geliştirme VersiyonuTüm ikazlar ve hata giderme modu ile birlikte

Son Kullanıcı Versiyonuİkazlar çıkarılmış olarak, 33.30KB min+gzip

CDN

Prototip geliştirme veya öğrenim amacıyla Vue’nin en güncel versiyonunu aşağıdaki şekilde kullanabilirsiniz:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Son kullanıcı ortamında belirli bir versiyon numarasını ve sürümünü hedefleyen bir bağlantı kullanmanızı tavsiye ederiz:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Eğer natif ES Modülleri kullanıyorsanız ES Modüllerine uyumlu bir sürüm de mevcuttur:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

NPM paketinin içeriğini cdn.jsdelivr.net/npm/vue adresinde inceleyebilirsiniz.

Vue aynı zamanda unpkg ve cdnjs üzerinde de sunulmaktadır (cdnjs senkronizasyonu biraz zaman aldığından en son versiyon orada olmayabilir).

Vue’nin farklı sürümleri hakkında daha fazla bilgi edinmeyi ve kullanıcılara
sunduğunuz site üzerinde vue.jsyi vue.min.js ile değiştirerek son kullanıcı versiyonunu kullanmayı ihmal etmeyin. Bu, geliştirme deneyimi yerine hız sunmak üzere optimize edilmiş daha küçük bir sürümdür.

NPM

Vue ile büyük çaplı uygulamalar inşa etmeniz durumunda NPM ile kurulumu tavsiye ederiz. Webpack ve Browserify gibi modül paketleyicileri ile gayet uyumludur. Vue aynı zamanda Tek Sayfa Bileşenler oluşturmak için yardımcı araçlar temin etmektedir.

# stabil en güncel versiyon
$ npm install vue

CLI

Vue, büyük çaplı Tek Sayfa Uygulamaları hızlı bir şekilde inşa etmeyi sağlayan resmi bir CLI’yi (Komut Satırı Arayüzü) kullanıma sunar. Bu arayüz modern bir kullanıcı arayüzü geliştirme akışı sağlamaya yönelik kendisine yeten proje kurma seçenekleri temin eder. Otomatik güncellemeli, her kayıtta lint kontrollü ve son kullanıcı için hazır sürümleri hazırlayıp yürütmek yalnızca birkaç dakikanızı alacak. Detaylar için Vue CLI dokümantasyonuna bakın.

CLI, Node.js ve ilişkili proje kurma araçları hakkında bilgiye sahip olduğunuzu var sayar. Eğer Vue veya genel olarak kullanıcı arayüzüne yönelik proje kurma araçları sizin için yeni bir konsept ise CLI’yi kullanmadan önce herhangi bir proje kurma aracı kullanmadan kılavuzu kılavuzu baştan sona okumanızı şiddetle tavsiye ederiz.

Vue Mastery’de bu konuyu açıklayan bir video izleyebilirsiniz

Farklı Sürümlere dair Açıklamalar

NPM paketinin dist/ klasöründe Vue.js’nin birçok farklı sürümünü bulabilirsiniz. Bu sürümler arasındaki farkların bir özetini aşağıda bulabilirsiniz:

UMD CommonJS ES Module (paketleyiciler için) ES Module (tarayıcılar için)
Tam vue.js vue.common.js vue.esm.js vue.esm.browser.js
Yalnızca yürütme vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
Tam (son kullanıcı için) vue.min.js - - vue.esm.browser.min.js
Yalnızca yürütme (son kullanıcı için) vue.runtime.min.js - - -

Terimler

Yürütme Ortamı + Derleyici ile Yalnızca Yürütme Ortamı karşılaştırması

Eğer şablonları istemcinin sisteminde derlemeniz gerekiyorsa (örn. template seçeneğine bir dizgi eklenmesi veya DOM içerisindeki HTML değerini şablon olarak kullanmak üzere bir elemente bağlanmak) derleyiciye ve dolayısıyla tam sürüme ihtiyacınız olacaktır:

// aşağıdaki derleyici gerektirir
new Vue({
  template: '<div>{{ selam }}</div>'
})

// aşağıdaki gerektirmez
new Vue({
  render (h) {
    return h('div', this.selam)
  }
})

vue-loader veya vueify kullanıldığında *.vue dosyaları içerisindeki şablonlar yürütme zamanında JavaScript olarak bir önderleme sürecinden geçer. Bu durumda nihai paketinizde derleyiciye gerçekten ihtiyacınız yoktur ve yalnızca yürütme ortamı sürümünü kullanabilirsiniz.

Yalnızca yürütme ortamı sürümleri tam sürüm versiyonlarına oranla yaklaşık %30 daha hafif olduğundan mümkün olan tüm durumlarda yalnızca yürütme ortamı sürümünü kullanmalısınız. Fakat yine de tam sürümü kullanmak isterseniz paketleyiciniz içerisinde bir alias belirlemeniz gerekecektir:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // webpack 1 için 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Projenizin package.json dosyasını ekleyin:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Projenizin package.json dosyasını ekleyin:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

Geliştirme ve Son Kullanıcı Modları

Geliştirme/son kullanıcı modları UMD sürümlerinde doğrudan kodlanmıştır. Geliştirme süreci için küçültülmemiş dosyaları, son kullanıcı ortamı için küçültülmüş dosyaları kullanın.

CommonJS ve ES Module sürümleri paketleyicilere yönelik olduğundan bu sürümler için küçültülmüş versiyon temin etmiyoruz. Nihai paketinizi kendiniz küçültmeniz gerekecek.

CommonJS ve ES Module sürümleri process.env.NODE_ENVe yönelik ham kontrolleri de bünyesinde tutarak hangi modda olmaları gerektiğini tespit edebilirler. Vue’nin hangi modda faaliyet göstereceğini kontrol etmek üzere bu ortam değişkenlerini değiştirmek için uygun paket ayarlarını kullanmalısınız. process.env.NODE_ENVin harf dizileriyle değiştirilmesi UglifyJS gibi küçültücülerin yalnızca kod geliştirmeye yönelik kod parçalarını ayıklayarak nihai dosya boyutunu küçültmeye olanak tanır.

Webpack

Webpack 4+’da, mode seçeneğini kullanabilirsiniz:

module.exports = {
  mode: 'production'
}

Fakat Webpack 3 ve önceki versiyonlarında DefinePlugini kullanmanız gerekecek:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Rollup-plugin-replaceyi kullanın:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Paketinize global bir envify transformu uygulayın.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Ayrıca bkz: Son Kullanıcı Versiyonunu Kullanıma Sürme Tavsiyeleri.

CSP ortamları

Chrome Apps gibi bazı ortamlar İçerik Güvenlik Politikasını (Content Security Policy - CSP) uygulamaya almıştır. Bu politika ifadelerin değerlendirilmesi sırasında new Function() gerçekleştirilmesini yasaklar. Tam sürüm şablonları derlemek için bu özelliği kullandığından bu tür ortamlarda kullanılmaları mümkün değildir.

Fakat yalnızca yürütme ortamı sürümü CSP ile tamamen uyumludur. Yalnızca yürütme ortamı sürümünü Webpack + vue-loader veya Browserify + vueify ile birlikte kullanırken şablonlarınız önderleme sürecinde CSP ortamlarında sorunsuz bir şekilde çalışan render fonksiyonlarına dönüşecektir.

Vue Geliştirme Sürümü

Dikkat: GitHub üzerindeki /dist dosyası yalnızca sürüm dağıtımları sırasında güncellenir. Vue’nin GitHub üzerindeki en güncel kaynak kodunu kullanmak için Vue’yi yerel ortamınızda tekrar kurmanız gerekecek!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Bower ile yalnızca UMD sürümlerine erişim sağlayabilirsiniz.

# stabil en güncel versiyon
$ bower install vue

AMD Modül Yükleyicileri

Bütün UMD sürümleri doğrudan bir AMD modülü olarak kullanılabilir.

Giriş →
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!