Vue.js Proje Oluşturma - Cdn - Vue-Cli - İlk Uygulama

Oldukça popüler bir Javascript frameworkü olan VueJs, cdn ile nasıl kullanılır, Vue-Cli ile proje nasıl oluşturulur, bu yazımızda bunlara bakacağız.

VueJs Nedir?

VueJs Evan You tarafından geliştirilen, her geçen gün daha da popülerleşen bir javascript frameworküdür. Çeşitli web uygulamaları geliştirmek için VueJs kullanabilirsiniz. Bu linkten resmi dokümantasyonuna ulaşabilirsiniz.

VueJs Cdn Kullanımı

VueJs’i direk Cdn’i dahil ederek kullanmaya başlayabilirsiniz. Dokümantasyonundaki cdn adresini index.html dosyamızdaki “head” taglarımızın içine dahil edelim.

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

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

Öncelikle id’si “app” olan bir div oluşturalım. Vue nesnemiz ile bu divi yöneteceğiz. Daha sonra “body” tagımızı kapatmadan hemen önce “script” taglarımızı açarak Vue nesnemizi yaratalım.

<html>
<head>
    <title>VueJs Cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>


<div id="app">
     <h1>VueJs {{ text }}</h1>
</div>
    
    
    <script>
    //vue nesnemizi oluşturup id'si "app" olan div'e eriştik.
    var app = new Vue({
        el:"#app",
        data:{
            text: "İlk Uygulama",
        }
    })
    
    </script>
</body>
</html>

<html>

<head>

<title>VueJs Cdn</title>

</head>

<body>

<h1>VueJs {{ text }}</h1>

</div>

//vue nesnemizi oluşturup id'si "app" olan div'e eriştik.

var app = new Vue({

el:"#app",

data:{

text: "İlk Uygulama",

}

})

</script>

</body>

</html>

VueJs Cdn Kullanımı

Vue nesnemizi oluşturdukran sonra “el” özelliği ile id’si app olan div’e eriştik. Data kısmında tuttuğumuz verileri uygulamamızın içerisinde kullanabiliriz.

Html kodlarımızın içinde Vue nesnemizin datasındaki bir veriyi görüntülemek için çift süslü parantez kullanacağız. Yukarıdaki örneği inceleyebilirsiniz.

Vue nesnemizin datasında tuttuğumuz verilere daha farklı yollarla da erişebiliriz. Bunun için Vue.js Directive Kullanımı adlı yazımızı inceleyebilirsiniz. VueJs directive’leri ile farklı yollar ile dataya erişebilirsiniz.

Vue-Cli Kurulumu

Büyük projeler geliştirirken cdn yeterli olmayabilir. Büyük projeler için Vue-Cli kullanabilirsiniz. Vue-Cli sizlere bir geliştirme ortamı sunar. Böylece projeye hazırlık yaparken çeşitli araçları sizin yerinize hazırlar.

Öncelikle bilgisayarınızda node.js kurulu olması gerekmektedir. Buradaki linkten size uygun node.js versiyonunu bilgisayarınıza indirip kurabilirsiniz.

Node.js kurulumunu yaptıktan sonra terminal ekranımızı açalım. Buradan versiyon kontrolü yaparak kurulumun tamamlandığını anlayabiliriz. Bunun için şu kodu kullanalım.

node -v

node -v

NodeJs Versiyon Kontrolü

Gördüğünüz gibi NodeJs bilgisayarımızda kurulu.

Şimdi yapmamız gereken global olarak Vue-Cli’yı kurmaktır. Bunun için aşağıdaki satırlardan kendi işletim sisteminize uygun olanı terminalimize yazıyoruz.

Windows için:

npm install -g vue-cli

1	npm install -g vue-cli

Linux ve Mac için:

sudo npm install -g vue-cli

1	sudo npm install -g vue-cli

Kurulumun tamamlandığını anlamak için aşağıdaki kod satırı ile versiyon kontrolü yapabiliriz.

vue -V

vue -V

Vue-Cli Versiyon Kontrolü

Gördüğünüz gibi kurulum sorunsuz bir şekilde tamamlandı.

Vue-Cli Kullanarak Proje Oluşturmak

Vue-Cli’yı global olarak bilgisayarımıza kurduk. Global kurduğumuzdan dolayı Vue-Cli’a bilgisayarımızın her yerinden erişebiliriz. Şimdi ise projemizi oluşturmak için projemizi kuracağımız dizine gidelim.

Bir dizinden başka bir dizine geçmek için “cd” yazıp boşluk bırakıyoruz. Daha sonra dizin adresimizi yazıyoruz. Örnek olarak masaüstündeki projeler klasörünün içine gitmek istiyoruz diyelim. Aşağıdaki resimde gördüğünüz gibi cd yazıp gideceğimiz dizini belirttik.

cd desktop\projeler

1	cd desktop\projeler

Cmd Dizin Değiştirme

Projeyi oluşturacağımız dizine geldik. Vue-Cli projesi oluşturmak için aşağıdaki komut satırını kullanacağız. Proje-adı yerine, projenize ne ad vermek istiyorsanız onu yazın.

vue create proje-adı

1	vue create proje-adı

Örnek olarak bu dizinde “vue-ilk-uygulama” adında bir proje oluşturalım. Bunun için yazacağımız komut satırı böyle olmalıdır.

vue create vue-ilk-uygulama

1	vue create vue-ilk-uygulama

Vue 2 Kurulum

Yukarıdaki satırı çalıştırdıktan sonra bize hangi sürümü kuracağımızı soracaktır. İstersek hazır bir sürüm seçerek bizim için kurulumu gerçekleştirecektir. İstersek de manuel seçeneğini seçerek hangi araçları kuracağımıza kendimiz karar verebiliriz.

Şuan için Vue 2 sürümünü seçip kurulumu gerçekleştirebiliriz.

Proje bulunduğumuz dizine oluşturuldu. Projeyi tarayıcıda çalıştırmak için proje klasörünün içine girmeliyiz. Bunun için aşağıdaki komutu kullanabiliriz.

cd proje-adı

1	cd proje-adı

Bizim projemizin adı “vue-ilk-uygulama” olduğu için biz bu satırı kullandık. Siz de projenizin adı neyse “proje-adı” kısmına onu yazarak proje klasörünüzün içine girebilirsiniz.

cd vue-ilk-uygulama

1	cd vue-ilk-uygulama

Proje klasörümüzün içine girdikten sonra aşağıdaki komutu kullanarak projemizi tarayıcı üzerinde çalıştırabiliriz.

npm run serve

1	npm run serve

VueJs Projeyi Çalıştırmak

Gördüğünüz gibi “http://localhost:8080” adresinde projemiz çalıştırıldı. Bu adrese gidince bizleri default Vue template’i karşılıyor olacaktır.

Network kısmındaki adres ise aynı wifi ağına bağlı cihazlar tarafından isteğe bağlı kullanılacak adrestir. Yani siz bilgisayarınız üzerinden projeyi çalıştırmış olsanız bile, telefonunuz aynı wifi ağına bağlıysa bu adrese girerek tarayıcıda projeyi görüntüleyebilirsiniz.

Vue Localhost

Bu yazımızda VueJs Cdn kullanımını ve Vue-Cli kurulumunu gördük. VueJs ile basit örnekler yapmak istiyorsanız Vue.js Directive Kullanımı adlı yazımızı inceleyebilirsiniz.