如何注册一个 Vue 组件？

Posted 2023-02-23

【中文标题】如何注册一个 Vue 组件？

【英文标题】：How do I register a Vue component?

【发布时间】：2017-09-23 04:33:54

【问题描述】：

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

ma​​in.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>

【问题讨论】：

我建议从 vue-cli 开始，而不是尝试自己构建；这真的很简单。 github.com/vuejs/vue-cli

@DanielBeck 谢谢丹尼尔。你能详细说明吗？不知道你到底是什么意思。

你有特别强烈的理由使用 require.js 吗？如果是这样，到目前为止您所做的工作有什么不妥？

你看过精美的手册吗~vuejs.org/v2/guide/components.html#Registration?

既然您想将 Vue 模板转换为纯 JS，请查看：vue-loader.vuejs.org/en

【参考方案1】：

我将假设您正在使用 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，设置可能会更烦人，但最终结果和开发过程要好得多。

不管怎样，下面是在没有 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'],
);

如您所见，这种方法要麻烦得多。如果您想使用这种方法，我建议您将所有组件拆分为它们自己的脚本文件，并在运行您的实际应用程序之前分别加载所有这些组件。

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

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

【讨论】：

我知道不推荐，但是没有 webpack 怎么加载组件？