我有以下文件。我想要做的就是能夠創建注入的不同組件。我如何使用require.js來實現這一點？下面是我的文件：如何註冊Vue組件？

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>

來源

2017-04-26 KingKongFrog

我建議從vue-cli開始，而不是試圖推出自己的版本;它非常簡單。 https://github.com/vuejs/vue-cli –

@DanielBeck謝謝丹尼爾。你能詳細說明嗎？不確定你的意思。 – KingKongFrog

你有使用require.js的特別有力的理由嗎？如果是這樣，那麼到目前爲止你所做的還不是什麼工作？ –

我打算假設你使用的是Vue.js文檔中解釋的webpack，否則你的.vue文件是無用的。如果你沒有，請先檢查如何設置一個webpack Vue應用程序，這是什麼讓你使用.vue文件。

import Menubar from '../components/menubar/main.vue'; 
Vue.component('menubar', Menubar);

這就是您如何添加全球範圍內的菜單欄組件。如果您想將組件添加到應用程序的一小部分，這裏有另一種方法（這是從另一個組件內部獲取的，但可以在您的主要Vue對象上以完全相同的方式使用）：

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

您可以在沒有webpack的情況下加載組件，但我不推薦它，如果您要繼續使用Vue（我強烈建議您這樣做），使用webpack是值得的。

更新

再次，真的，真的，真的可以考慮使用的WebPack，而是如果你會用Vue.js繼續，安裝可能會稍微更討厭，但最終的結果和發展過程是waaaay更好。

無論如何，這裏是你如何創建一個沒有webpack的組件，請注意，沒有webpack你不能使用.vue文件，因爲.vue格式是他們的webpack插件的一部分。如果您不喜歡以下解決方案，您還可以使用例如ajax請求加載.vue文件，我相信有一個項目在那裏有這樣做，但我現在找不到它，但最終的結果是webpack比ajax更好，所以我仍然建議使用該方法。

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'], 
});

正如你所看到的，這種方法很麻煩。如果你想使用這種方法，我建議將所有組件分割到它們自己的腳本文件中，並在運行實際應用程序之前單獨加載所有這些組件。

請注意，`文本`是javascript中的多行字符串，它使得它更容易編寫模板。

正如我所說，有一些項目使用ajax加載.vue文件，但我不能爲我的生活找到它現在。

來源

2017-04-26 06:53:52

我知道這不是推薦的，但是如何在沒有webpack的情況下加載組件？ – KingKongFrog

如何註冊Vue組件？

回答

更新

相關問題