Halit Sever Profile Picture
Halit Sever
  • Jan 18
  • 8 min read

Vue.js bileşenlerini (component) npm üzerinde paylaşmak

Vue.js bileşenlerini (component) npm üzerinde paylaşmak

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ı:

No alt text provided for this image

Ş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:

Tüm testler başarılı sonuçlandı ise, bileşeninizi npm de paylaşmaya hazırsınız!

Build komutunu çalıştıralım:

npm run build

Paketi yayınlamadan önce npm kullanıcınızı eklemeniz gerekiyor o da:

npm adduser

ile mümkün.

Son olarak kullanıcı ekledi iseniz, komutunu verip paketinizi paylaşabilirsiniz:

npm publish

Tüm bunların ardından bileşeninize erişim sağlayabilirsiniz.

Github: Kendi hazırladığım json to excel bileşeni

Websitem

MIT License 2021-PRESENT © Halit Sever