Vue.js (4) : Vue-cli ile Hazır Gelen Proje Şablonları

Vue.js yazı dizimizin önceki bölümlerinde cdn üzerinden vue.js scriptlerini yüklemiştik. Fakat böyle bir kullanım, orta ve büyük çaplı uygulamalar için uygun olmayacaktır. Yapılması gereken, her bileşeni ayrı dosyalarda tanımlayarak, webpack gibi bir araç kullanarak uygulamaya entegre etmektir. Webpack, yeni geliştiriciler için anlaşılması biraz zor olan bir araç.  Vue ekosisteminde yer alan, bu problemi aşmamızı sağlayacak bir başka araç var: vue-cli.

vue-cli ile tüm ayarları yapılmış, hazır bir proje yapısını otomatik olarak oluşturabiliyoruz. Yeoman kullananlar bilirler; aynı mantığı kullanarak birkaç komut ile projelerimizi oluşturacağız.

vue-cli Kurulumu

vue-cli’nin kurulumu için tahmin edeceğiniz gibi öncelikle sisteminizde node.js kurulu olması gerekiyor.

npm install -g vue-cli

Yukardaki komutu çalıştırdıktan sonra, artık vue-cli ile proje oluşturmaya başlayabiliriz.

Öne çıkan iki proje şablonundan bahsedelim.

simple

Bu proje şablonu webpack kullanmadan, en basit haliyle tek sayfadan oluşan bir proje oluşturur. Bizim şimdiye kadar yaptığımız gibi cdn üzerinden vue scriptlerini projeye dahil eder.

simplevue projesi oluşturuyoruz.

vue init simple simplevue

simplevue dizini oluşturuluyor ve içinde tek bir index.html dosyası var.

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>{{ greeting }}</h1>
    <ul>
      <li>
        To learn more about Vue, visit
        <a :href="docsURL" target="_blank">
          {{ humanizeURL(docsURL) }}
        </a>
      </li>
      <li>
        For live help with simple questions, check out
        <a :href="gitterURL" target="_blank">
          the Gitter chat
        </a>
      </li>
      <li>
        For more complex questions, post to
        <a :href="forumURL" target="_blank">
          the forum
        </a>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
        docsURL: 'http://vuejs.org/guide/',
        gitterURL: 'https://gitter.im/vuejs/vue',
        forumURL: 'http://forum.vuejs.org/'
      },
      methods: {
        humanizeURL: function (url) {
          return url
            .replace(/^https?:\/\//, '')
            .replace(/\/$/, '')
        }
      }
    })
  </script>
</body>
</html>

Tarayıcımızdan açarsak, şöyle bir görüntü çıkar karşımıza:

simplevue

Diğer proje şablonuna bakalım:

webpack-simple

vue init webpack-simple mywebapp

Hazır webpack ayarları yapılmış bir proje yapısı oluşturur. Vue uzantılı componentlerimizin webpack ile yüklenmesini sağlayan vue-loader bileşeni ayarlanmış durumdadır. Visual Studio Code ile oluşan projenin yapısına bakabiliriz.

mywebappvscode

webpack.config.js dosyamızı bakarsak, babel kurulumlarının da yapılmış olduğunu görürüz. Bu güzel bir şey, çünkü artık javascript kodlarımızı es6 standardına göre yazabiliriz. Biz es6 ile gelen güzel özellikleri kullanalım, webpack’te bunu tüm tarayıcıların anlayacağı es5 formatına çevirsin.

cd mywebapp
npm install
npm run dev

Sırasıyla yukardaki komutları çalıştıralım (Windows ortamında geliştirme yaptığım için, powershell kullanıyorum):

npmrundev

Son komutu çalıştırdıktan sonra, artık tarayıcımızla sayfamıza bağlanabiliriz. Burda bahsetmek istediğim nokta, webpack ile birlikte gelen development server’ı kullanmamız. Neden kullanıyoruz diye soracak olursak, hmr (hot module replacement) özelliğinden dolayı. Bu özellik sayesinde javascript kodunda, html veya css’te değişiklik yapar yapmaz, server’ı kapatıp açmaya gerek kalmadan, tarayıcıda yüklenmiş olan sayfaya yansıması.

http://localhost:8080 adresine tarayıcımız ile bağlanabiliriz.

HMR ‘nin nasıl çalıştığını görmek için, src dizini altındaki App.vue dosyasında ufak bir değişiklik yapıyorum:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem (onbirkod)</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Kaydedip, tarayıcımıza baktığımızda değişikliğin otomatik olarak ekrana yansıdığını görürüz.

hmr

Artık webpack-simple ile ilk hali oluşmuş projemizi geliştirip kendi uygulamamızı oluşturmaya sıra geldi:

Bir hesap makinesi uygulaması yapıyoruz. Hesap makinemiz, sadece toplama işlemini yapabiliyor. a ve b rakamlarını giriyoruz, otomatik olarak a + b sayılarının toplamını hesaplıyor.

src dizini içerisinde component dizini oluşturalım, bu dizinin içerisindede iki tane bileşen oluşturalım. Header.vue ve Addition.vue:

Header.vue:
<template>
    <div>
        <h3>Hesap Makinesi</h3>
    </div>
</template>
<script>

</script>
<style scoped>

div {
    background-color: beige;
    height: 70px;
    padding-top: 10px;
}

</style>
Addition.vue:
<template>
    <div>
        <h3>Addition</h3>
    </div>
</template>
<script>

</script>
<style scoped>
    div {
        background-color: lightblue;
        height: 100px;
    }
</style>

Bileşenler template, script ve style bölümlerinden oluşuyor. style kısmında scoped ifadesi var dikkat ettiyseniz, zorunlu bir ifade değil. Fakat scoped dediğiniz zaman, ilgili style’ın sadece bulunduğu bileşen için geçerli olduğunu belirtmiş oluyoruz. scoped ifadesi olmasaydı, yazdığımız css stilleri, tüm sayfadaki html elemanlarını etkileyecektir. Bu ayrıma dikkat etmek gerekiyor.

Bu bileşenlerin App.vue tarafından kullanılabilmesi için App.vue kodunu aşağıdaki şekilde değiştiriyorum:

<template>
  <div id="app">
      <app-header></app-header>
      <app-addition></app-addition>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Addition from './components/Addition.vue';

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    'app-header': Header,
    'app-addition': Addition
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

es6 ile gelen import komutlarını kullanarak, bileşenleri app.vue dosyasına tanıtıyorum.

ilkhalicli

Bileşenler artık kendi dosyalarında tanımlı, böylece projemiz daha güzel, bakımı kolay bir yapı kazanmış oldu.

Şimdi addition bileşenini geliştirelim:

<template>
    <div>
        <h3>Addition</h3>
        <div>
            <label>a</label>
            <input type="text" v-model="a"/><br>
            <label>b</label>
            <input type="text" v-model="b"/>
            <hr>
            <label>a + b = </label>
            <span>{{summation}}</span>    
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            a: 0,
            b: 0
        }
    },
    computed: {
        summation() {
            return this.a + this.b;
        }
    }
}
</script>
<style scoped>
    div {
        background-color: lightblue;
        height: 100px;
    }
</style>

a ve b inputlarını v-model ile çift yönlü bağladık. computed özelliği olarak summation özelliğini ekledik. Böylece a veya b’den biri değiştiğinde otomatik olarak summation değeri değişecek. data ve summation fonksiyonlarını tanımlarken, es6 standardını baz aldık. Bizim bildiğimiz eski es5 standardını kullanmış olsaydık, script bölümünü şöyle tanımlayacaktık:

export default {
    data: function () {
        return {
            a: 0,
            b: 0
        }
    },
    computed: {
        summation: function () {
            return this.a + this.b;
        }
    }
}

Şimdi deneyip nasıl çalıştığını görelim:

summationerror

Vue.js devtools eklentisi

Görüldüğü gibi ortaya çıkan sonuçta bir yanlışlık var. Uygulama a ve b’nin toplamını 45 olarak hesaplıyor. 9 olması gerekirken. Bunun sebebini bulmak için, bir chrome eklentisi olan vue.js devtools‘ı kullanabiliriz. Önceki projelerimizde cdn ile vue.js’ı kullandığımız için bu özelliği kullanamıyorduk. Artık kullanabiliriz.

Chrome üzerindeyken F12 tuşuna basarak, geliştirici araçları ekranını açalım.

vuedevtools

Vue sekmesini seçelim. Bu araç sayesinde, tüm bileşenlerin datalarını görebiliriz.

vudevtoolsdisplay

Vue devtools sekmesinden baktığımızda AppAddition componentinde a ve b string olarak görülüyor. Dolayısıyla summation computed özelliği, string birleştirme yapıyor. Bu durumu nasıl düzeltebiliriz?

Vue.js’in sağlamış olduğu number modifier’ı ile a ve b değerlerinin otomatik olarak number’a çevrilmesini sağlarız: v-model.number=”a”

Addition.vue (son hali):
<template>
    <div>
        <h3>Addition</h3>
        <div>
            <label>a</label>
            <input type="text" v-model.number="a"/><br>
            <label>b</label>
            <input type="text" v-model.number="b"/>
            <hr>
            <label>a + b = </label>
            <span>{{summation}}</span>    
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            a: 0,
            b: 0
        }
    },
    computed: {
        summation() {
            return this.a + this.b;
        }
    }
}
</script>
<style scoped>
    div {
        background-color: lightblue;
        height: 100px;
    }
</style>

Sayfamıza tekrar bakacak olursak, her şeyin düzgün çalıştığını görmüş oluruz:

summationright

Sonuç

vue-cli aracıyla tüm webpack ayarları hazır olarak yeni proje oluşturuyoruz. Bu yapıyla birlikte, bileşen bazlı uygulama geliştirebiliriz. Webpack ile birlikte gelen hot reloading özelliklerini kullanarak, etkili ve hızlı işleyen bir geliştirme ortamı oluşturmuş oluyoruz.

 

 

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top