#vueogreniyoruz: Webpack ile çalışma ortamını tanımak
Merhaba Arkadaşlar,
Eğitim serisinin ilk makalesi ile karşınızdayım 🙂 . Bu makalede çalışmalarımızı yapacağımız klasöre ilk olarak webpack şablonu kurulumunu yapacağız. Daha sonra bir editör içerisinde dosyalarımızı açıp hangi klasöre ne ekleyerek çalışabildiğimizden, template yapılarından bahsedeceğiz.
Webpack Şablonu
İlk olarak terminali açalım ve kurulum yapacağımız klasöre gidelim. Daha sonra şu komutu yazıp çalıştıralım:
vue init webpack
Komut çalıştırıldığında bizden cevap vermemiz beklenen bir kaç soru gelecektir. Bu soruları aşağıdaki gibi doldurabiliriz/seçebiliriz:
Generate project in current directory? Yes Project name bilgisayaci-vueogreniyoruz-egitim-serisi Project description A Vue.js project Author erselgulyaz <erselgulyaz@gmail.com> Vue build standalone Install vue-router? No Use ESLint to lint your code? Yes Pick an ESLint preset Standard Set up unit tests Yes Pick a test runner jest Setup e2e tests with Nightwatch? Yes
Bu maddelerden önemli olarak söyleyebileceğim şey vue-router kurulumu ile ilgili soruya olumsuz yanıt vermenizdir. Çünkü yazacağım başka bir makalede vue-router’ın kurulum ve kullanımından bahsedeceğim. Bunun dışındaki sorularda genellikle ilk seçim olarak gelen seçenekleri ve Y/N cevabı beklenenlerde de ‘Y’ işaretledim.
Proje kurulumu yapıldıktan sonra yaptığımız seçimlere göre içerisinde yazılı olan npm paketlerinin kurulması için
npm install
komutunu çalıştırıyoruz. Terminal üzerinden takip edebileceğimiz kurulum tamamlandıktan sonra projemiz artık çalışmaya hazır durumdadır. Eğitim serisi içerisindeki diğer makalelerde css yazmamız gerekebilir. Css yazarken sass kullanmak istiyorum. Proje içerisinde sass kurulumu yapalım ve ilk kurulum ile gelmeyen bir npm paketinin projeye nasıl dahil edilebildiğini görelim:
npm install node-sass sass-loader --save-dev
Komutunu çalıştırdığımızda projemiz içerisinde sass kurulumu yapılacaktır. Sass kullanmak için projeye node-sass ve sass-loader paketlerinin dahil edilmesi gerekiyor. Sonda yazdığımız ‘–save-dev’ alanı package.json içerisine iki paketin de yazılmasını sağlıyor.
Ekleyeceğimiz başka bir şey kalmadığına göre artık projemizi çalıştıralım. Çalıştırmak için
npm run dev
komutunu yazalım. Derleme işlemi tamamlandıktan sonra localhost:8080 adresi ile tarayıcı üzerinde projeyi görüntüleyebiliriz.
KLASÖR YAPISI
Projeyi editör ile açtığımızda önümüze bir çok klasör gelecektir. Genel olarak projelerde ‘src’ klasörü altında çalışmalarımızı yaparız ama diğer klasör ve ana dizindeki dosyaların neden var olduklarını öğrenmenin gelecek için faydalı olacağını düşünüyorum.
Terminal üzerinden kurulum yaparken bazı soruları cevaplamıştık. Ve ilgili şablon bu cevaplara göre kurulmuştu. Ana dizinde gördüğümüz bir çok içerik bu cevaplara göre oluşturuldu. Örneğin eslint ile ilgili verdiğimiz cevaplar nedeniyle eslintrc.js isimli bir sayfa görebiliriz. e2e ve unit test için gelen soruya olumlu cevap verdiğimiz için test klasörü oluşturuluyor. Kurduğumuz webpack şablonu yerine webpack-simple şablonunu kursaydık bu kadar soru sorulmayacaktı ve içeriği daha az olan bir proje klasörü oluşturulacaktı.
Kodlamalarımızı yapacağımız src klasöründe hem ana dizin hem de alt kırılımlar bulunuyor. İsimlerini tamamen değiştirebileceğimiz klasör isimlerinde kurulum ile birlikte gelen isimlere göre yorumlayalım.
– ‘assets’ klasörü adından da anlaşılacağı gibi projenin resim, font gibi dosyalarını barındırıyor.
– ‘components’ klasörü ayrı bir başlık altında işleyeceğimiz projeyi daha küçük parçalarda yönetmemizi sağlayan küçük bileşenleri barındırıyor. Component’lar projenin tamamını oluştururlar ve farklı sayfalarda olmalarına rağmen birbirleriyle etkileşim halinde olabilirler.
– App.vue sayfası projeyi çalıştırdığımızda tarayıcıda görebildiğimiz sayfadır. Components klasöründe hazırlanacak bileşenler App.vue ve onun gibi hazırlanan sayfalarda kullanılırlar. About.vue , Contact.vue gibi sayfalar aynı dizinde kullanılabilir.
– main.js sayfası, projeye ekleyeceğimiz vue ekipmanlarının projeye dahil edildiğini yazdığımız sayfadır. Örneğin routing işlemleri için kullanacağımız vue-router plugin’ini projeye kurduktan sonra main.js içerisine import edeceğiz ve bir router değişkeni içerisinde projenin tüm routing işlemlerini yönetebileceğiz. Yani kısacası main.js sayfası proje çalıştırılırken oluşan isteklerin cevaplanabildiği bir sayfadır.
TEMPLATE YAPILARI
Projede tüm fiziksel sayfa ve component’lar ‘.vue’ uzantılı olan sayfalardan oluşur. Bu sayfaların her biri kendisi ile ilgili olan html, css ve javascript kod bloklarını içerisinde barındırabilir. Bu şekilde bir kullanım sayesinde bir component’ın css ve javascript’i yalnızca component çağırıldığında sayfaya yüklenir. Bunu büyük bir yapının genelinde düşündüğümüzde sayfa açılış ve açıldıktan sonraki işlem hızlarında büyük ölçüde artış sağlayabileceğimizi öngörebiliriz.
Sayfaların görüntüsü şu şekilde olur:
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
– En üstte bulunan tag’leri içerisinde ilgili bileşenin/sayfanın html kodları yazılır. Tüm html yalnızca bir kapsayıcının içerisinde olmalıdır. Template içerisinde iki adet kapsayıcı oluşturulursa hata alırız.
– Script içerisinde bileşenin/sayfanın javascript kodlarını yazarız. Genel olarak tüm .vue uzantılı sayfalarda javascript kodlamaları ‘export default{}’ ile başlar. Javascript geliştirmeleri yaparken;
— data() : verileri içerisinde barındırır.
— created() : bileşen/sayfa yüklendiği anda çalıştırılacak işlemler içerisinde yazılır.
— computed() : bir olay gerçekleştiği anda çalıştırılacak fonksiyonlar içerisinde yazılır. Örneğin çağırılan component’a bir id değeri bind edildiğinde bu id’ye bağlı ‘/makale-detay/1’ gibi bir url döndürmesini istediğimiz fonksiyon bu alan içerisine yazılır.
— methods() : içerisinde fonksiyonları barındırır. Created veya computed tetiklendiği anda bu fonksiyonlar çağırılabilir.
– Style içerisinde bileşenin/sayfanın stil kodlamaları yapılır. Style tag’ine scoped parametresi geçildiğinde ilgili sayfa içerisindeki tüm html’lere random bir attribute eklenir. Yazılan tüm css kodları bu attribute’a göre yazılır. Örneğin; .table-list-item[_vue3432342] gibi bir css çıktısı verir. Birbirine benzer html yapılar aynı sayfa içerisine import edildiğinde css’lerinin birbirini etkilememesi için kullanılabilir. İkinci bir parametre olarak ‘lang’ yazabiliyoruz. Bu da stillerin hangi dil ile yazıldığını gösterir. Eğer parametreyi hiç eklemezsek düz css ile yazmamız gerekir. Yukarıdaki gibi sass kurulumu yapılmış projelerde lang=”scss” parametresi geçilerek stillerin sass ile yazılması sağlanabilir.
COMPONENT
Projenin en küçük yönetilebilir yapılarıdır. Sayfa içeriklerinde kullanılabilmesi için import edilmesi gerekmektedir. Örneğin; yeni oluşturulan Deneme.vue component’ı App.vue sayfasına import edilmek istenirse App.vue sayfasındaki script tag’lerinin en üstüne şu satırı eklememiz gerekir:
import Deneme from './components/Deneme.vue'
import edilen component’ın bir alt satırda başlayan export alanı içerisinde de components kapsayıcısı altında tanımlanması gerekiyor. Bunun için yapmamız gereken düzenleme:
export default {
components: {
Deneme
}
}
MİNİK BİR UYGULAMA
Ekrana bir değişkenin içeriğini nasıl yazdırabildiğimizi de göstererek bu makaleyi sonlandırıyorum. İlk kurulum ile birlikte gelen App.vue sayfasını açalım. Template tag’leri içerisini düzenleyelim:
<template>
<div id="app">
{{ message }}
</div>
</template>
Script tag’leri içerisinde bu değişkeni bir data olarak tanımlayıp değerini ‘Hello World!’ olarak yazalım.
<script>
export default {
data () {
return {
message: 'Hello World!'
}
}
}
</script>
Tarayıcıda Hello World! yazısını göreceğiz.
Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız
Tüm Yorumlar