更新

Question

我有以下文件。我想要做的就是能够创建注入的不同组件。如何使用require.js实现此目的？这是我的文件：

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

我将假设您正在使用Webpack，如Vue.js文档中所述，否则您的.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
    },
...

您可以在没有网络包的情况下加载组件，但我不推荐它，如果您要继续使用Vue（我强烈建议您这样做），使用webpack进行研究是值得的

更新

再次，真的，真的，真的，真的，考虑使用webpack，如果你将继续使用Vue.js，设置可能会稍微烦一点，但最终结果和开发过程是更好的。

无论如何，这里是你如何在没有webpack的情况下创建一个组件，请注意，如果没有webpack，你就不能使用.vue文件，因为.vue格式是他们webpack插件的一部分。如果您不喜欢以下解决方案，您也可以使用例如ajax请求加载.vue文件，我相信有一个项目可以做到这一点，但我现在无法找到它，但最终结果是使用webpack比使用ajax更好，所以我＆＃39; d仍然建议采用这种方法。

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

正如您所看到的，这种方法很麻烦。如果您想使用此方法，我建议您将所有组件拆分为自己的脚本文件，并在运行实际应用之前单独加载所有这些组件。

请注意，`Text`是javascript中的多行字符串，它使您的模板编写更容易。

正如我所说，有一些项目可以使用ajax加载.vue文件，但我现在无法找到它。

如何注册Vue组件？

1 个答案:

更新