İyi günler dostlar,

Uzun zamandır karşılaştığım component import problemini sonunda çözebildim. Aslında daha önce require.js ile bunu halletmiştim ama yeni başladığım için karmaşık geldi ve devam etmek istemedim. Bugün yaklaşık üç dört saatlik bir çalışmanın ardından benimle aynı dertten başı ağrıyan kişilere ilaç niteliğinde bir şey getirdim.

Komponent içe aktarmaya neden ihtiyaç duydum?

Bildiğiniz üzere, VueJS veya Angular geliştiricileri bu geliştirme işlemini NodeJS abimiz yardımıyla *CLI üzerinden yapıyorlar. NodeJS çok kolaylık sağlasa da benim gelişimime engel olacak gibi düşünüyorum. “vue add router” komutu ile router kurmak beni üşengeç bir insan yapmasın diye bu davranışım. Bir çok şeyi başkaları geliştiriyor, bir kaç komut ile projemize eklemek beni korkutuyor.
Kendime yazılımcı demek istemiyorum henüz, fakat bir yazılımcı olmak istiyorsam, meslektaşlarımın yazdığı kodları ve oluşturduğu kütüphaneleri tek bir kod ile kullanabilmek yerine, yazdıkları kütüphane veya kodları anlayıp benimsemek isterim.
Vue-Cli aracılığı ile projemi geliştirip yoluma devam edebilirdim fakat, huyum bu, mantığını öğrenmediğim şeyi kullanasım gelmiyor.

HTTP Vue Loader <3

https://unpkg.com/http-vue-loader

Doğrudan sizlere linki veriyorum yukarıda, fazla bekletmemek için. Ufak bir örnek ile de nasıl kullandığımı anlatmak istiyorum.

Vue Router ile Komponent içe aktarmak

Doğrudan <script> içine yazıp çalışıyorum, external olarak javascript çağırmak ile uğraşmıyorum. Siz zaten mantığını anlayın yeter.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Http Vue Loader</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <style>
        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
        }

        h2 {
            color: blueviolet
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>? Merhaba Canım ?</h1>
        <router-link :to="{ name: 'home'}">Anasayfaya Git</router-link>
        <router-link :to="{ name: 'profile'}">Profile Git</router-link>

        <router-view></router-view>
    </div>

    <script>

        const routes = [
            { name: 'home', path: '/home', component: httpVueLoader('home.vue') },
            { name: 'profile', path: '/profile', component: httpVueLoader('profile.vue') }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>

home.vue

<template>

      <h2>{{ homepage }} Burası Dostum!</h2>

</template>
<script>
module.exports = {
  data: function () {
    return {
      homepage: 'Anasayfa'
    }
  }
}
</script>

profile.vue

<template>

      <h2>{{ profile }} sayfası Burası Dostum!</h2>

</template>
<script>
module.exports = {
  data: function () {
    return {
      profile: 'Profil'
    }
  }
}
</script>

Demo için buyrun link veriyorum.

Demo

Benim bilmediğim farklı bir yol varsa, yorum bölümünden yazabilirsiniz.

Hoşçakalın