Halit Sever

VueJS kullanıcı arayüzleri geliştirmek için oluşturulmuş bir Javascript kütüphanesi diyebiliriz.

VueJS ile beraber bir çok hazır tasarımı, fonksiyonları olan bileşeni (component) projemize ekleyip çıkartabiliriz.

Peki ya bir tane bileşen yaratıp onu paylaşmak isteseydik?

Bileşen oluşturmak için hazırlık:

İlk olarak bileşenimizi yeni bir vue projesi açıp components klasörü altında oluşturalım, ben örnek olması amacıyla üstüne tıklanınca uyarılar dizisi çıkartan bir metin bileşeni yarattım:

alert-goster.vue:

    <template>
      <a href="#" :onclick="topluAlert()">Alert Göster!</a>
    </template>

    <script>
    export default {
      name: "alert-goster"
      methods: {
        topluAlert() {
          var array =["elma","karpuz","patlıcan"];
          for (let index = 0; index < array.length; index++) {
            alert( array[index]
            );
          }
        },
      }
    };
    </script>

Ayrıca App.vue üzerinden de çalıştığını kontrol ettim:

    <template
      <alertGoster/>
    </template>
    
    
    <script>
    import alertGoster from "./components/alert-goster.vue";
    
    
    export default {
      name: "App",
      components: {
        alertGoster,
      },
    };
    </script>

Bu adımlardan sonra kendi projemde oluşturduğum bileşeni npmde paylaşmaya hazırlamak kalıyor.

Npm üzerinde paylaşmak için hazırlık:

İlk olarak projenin klasörü içerisinde iken şu komutu verelim:

npm install -g vue-sfc-rollup

Ardından projenin ana klasöründe iken şu komutu verelim:

sfc-init

Bu komutu verdiğimiz zaman terminal ekranından belirlememiz bazı değerler var.

1- Seçeneği vue3 olarak işaretleyin.

2-Seçeneği Single Component olarak işaretleyin

3-Buraya paketinizin npm de görünecek adını yazın

Burada iken npmjs.com adresine gidelim ve arama bölümünden oluşturacağımız benzersiz paket adı alınmış mı diye bakalım, eğer alınmamışsa başka bir paket adı bulup yine aynı şekilde alınıp alınmadığını kontrol edelim. Arama sonucunda paketinizin düşündüğünüz adıyla bir sonuç çıkmıyorsa doğru yoldasınız.

4-Bileşenin nasıl kullanacağını belirleyelim, ben paket adıyla aynı bıraktım

5-Bileşeni yazarken Javascript mi yoksa Typescript ile mi yazdığınızı belirtelim

6-Bileşenin kaydolacağı lokasyonu belirtelim.

Tüm bu işlemlerden sonra terminal çıktımız şu şekilde olmalı:

Şimdi ise paket adı ile oluşturulmuş bir klasör olacak ./merhaba-dunya-bu-bir-paket gibi... Bu klasörün içine girelim ve npm install yazarak bağımlılıkları yükleyelim.

Bileşeni npm üzerinde paylaşmak:

Şimdi ise oluşturduğumuz klasörün içinde iken

merhaba-dunya-bu-bir-paket/src/merhaba-dunya-bu-bir-paket.vue dosyasını açalım, 1.adımda oluşturduğumuz bileşenin kodlarını kopyalayıp, bu dosyanın içindekilerini silip ilk yazdığımız kodları yapıştıralım.

Ardından bileşen klasörümüzün içinde terminal açarak şu komutu verelim:

npm run serve

Bileşenimiz artık düzgün bir şekilde çalışıyor. Eğer prop kullanıyorsanız, bunun için merhaba-dunya-bu-bir-paket/dev/serve.vue dosyasına girip bileşeninize App.vue dosyasındaki gibi düzenleme yapmanız yeterli olacaktır.

Örneğin: