Bir Vue bileşenini nasıl kaydederim?

Question

Aşağıdaki dosyalar var. Tek yapmak istediğim, enjekte edilen farklı bileşenler yaratabilmek. Bunu require.js kullanarak nasıl başarabilirim? İşte benim dosyalar şunlardır:

main.js

define(function(require) { 
    'use strict'; 
    var Vue = require('vue'); 
    var myTemplate = require('text!myTemplate.html'); 

    return new Vue({ 
     template: myTemplate, 
    }); 
}); 

myTemplate.html

<div> 
    <my-first-component></my-first-component> 
</div> 

MyFirstComponent.vue

<template> 
    <div>This is my component!</div> 
</template> 

<script> 
export default {} 
</script> 

Answer 1

Vue.js belgelerinde açıklandığı gibi web paketini kullandığınızı varsayacağım ya da .vue dosyanız işe yaramaz. Değilseniz, önce bir webpack Vue uygulamasını nasıl ayarlayacağınızı kontrol edin. Bu, .vue dosyalarını kullanmanıza izin verir.

Örn. global kapsam için bir menubar bileşeni. Bileşeni uygulamanızın yalnızca küçük bir bölümüne eklemek isterseniz, bunu yapmanın başka bir yolu (bu, başka bir bileşenin içinden alınır, ancak birincil Vue nesnesinde tam olarak aynı şekilde kullanılabilir):

import Sidebar from '../../components/sidebar/main.vue'; 
export default { 
    props: [""], 
    components: { 
     'sidebar': Sidebar 
    }, 
... 

Web paketi olmadan bileşenleri yükleyebilirsiniz, ancak tavsiye etmiyorum, eğer Vue kullanmaya devam edecekseniz (bunu yapmanızı kesinlikle öneririm), webpack'i kullanmaya değer.

kez daha, gerçekten, gerçekten, gerçekten webpack mısın Vue.js devam edecekler yerine eğer kullanmayı düşünün Update kurulum biraz daha can sıkıcı olabilir ama sonuç ve gelişim süreci Waaaay iyidir .

Her neyse, burada web paketi olmayan bir bileşen nasıl oluşturursunuz, web paketi olmadan .vue dosyaları webveri eklentilerinin bir parçası olduğu için .vue dosyalarını kullanamayacağınızı unutmayın. Aşağıdaki çözümü beğenmezseniz, örn. ajax istekleri .vue dosyaları yüklemek için, orada bir yerde bir proje var inanıyorum ama bunu şu anda bulamıyorum, ama sonuç yine de ajax ile webpack ile daha iyidir, bu yüzden hala devam etmenizi öneririm bu yöntem.

var mytemplate = `<div> 
<h1>This is my template</h1> 
</div>` 

Vue.component('mycomp1', { 
    template: mytemplate 
}); 

Vue.component('mycomp2', { 
    template: ` 
     <div> 
      Hello, {{ name }}! 
     </div> 
    `, 
    props: ['name'], 
}); 

Gördüğünüz gibi, bu yöntem A LOT daha hantaldır. Bu yöntemle devam etmek istiyorsanız, tüm bileşenleri kendi komut dosyalarına bölmenizi ve tüm uygulamalarınızı gerçek uygulamanızı çalıştırmadan önce yüklemenizi tavsiye ederim.

`Text`'in javascript'te çok satırlı bir dize olduğunu ve şablonunuzu yazmanın biraz daha kolay olduğunu unutmayın.

Ve dediğim gibi, ajax kullanarak .vue dosyalarını yüklemek için orada bir proje var, ancak şu an için hayatımı bulamıyorum.