如何在HTML文件中访问Vue-Loader组件

Question

我希望使用Vue Loader的模块化风格和文件格式（即每个.vue文件中都有模板部分、脚本部分和样式部分）。但我不知道如何在HTML文件中使用自定义模板，甚至不确定是否可以这样做。

例如，在App.vue文件中，我可以使用以下代码：

<template>
  <div id="app">
    <message>Hello there</message>
  </div>
</template>

这将能够在首页上展示一个自定义消息组件。

我想做的是，在html文件中使用我的自定义组件。例如，在index.html文件中使用以下代码：

  <div id="app">
    <message>Hello there</message>
  </div>

有任何想法我该怎么做吗？谢谢。

注意：我对Vue Loader比较陌生，对Vue也有一些了解（所以如果这个问题的答案显而易见，我提前向您道歉）。

- Moshe

---

听起来你想使用单文件组件语法编写组件，但是在HTML页面的脚本标签中创建的Vue中使用这些组件。是这样吗？ - Bert

@BertEvans 我想是这样的。基本上，我想要一个HTML页面，它调用单个JS文件并使用自定义组件标签在HTML的正常流程中呈现组件。例如：<message>这是一条消息</message>。 - Moshe

Answer 1

有许多方法可以编译单文件组件，然后在网页中使用该组件。

使用vue-cli

Vue发布了一个命令行界面工具称为vue-cli，可以初始化项目并构建零配置组件。构建一个可以在您的页面中使用的组件的选项是使用vue build。

vue build MyComponent.vue --prod --lib MyComponent

这将编译一个脚本，暴露出MyComponent。如果你在页面中包含该脚本，并全局添加它，

Vue.component(MyComponent)

该组件将在您的任何Vue中可用。

制作插件

这是一个非常基本的框架示例，用于制作插件。

myPluginDefinition.js

window.MyPlugin= {};

MyPlugin.install = function (Vue) {
    Vue.component('my-component', require('./my-component.vue'));
}

webpack.config.js

module.exports = {
    entry: "./myPluginDefinition.js",
    output: {
        path: __dirname+'/dist',
        filename: "MyPlugin.js"
    },
    module: {
        loaders: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        }
        ]
    }
};

这将构建一个名为MyPlugin.js的文件，其中包含您在安装函数中包含的每个单独文件组件。在页面上包含脚本，然后调用。

Vue.use(MyPlugin)

然后您将拥有所有组件。

使用自定义webpack配置

有许多方法可以配置webpack来构建您的单文件组件。您可以将它们全部构建到一个文件中，也可以分别构建它们。如果您想使用其中一种选项，请提出单独的问题。

- Bert

Answer 2

导入所需的组件定义对象并将其传递给选项.components

<template>
    <some-component></some-component>
</template>
<style>...</style>
<script>
    import SomeComponent from 'path/to/some-component.vue';

    export default {
        components: {
            // ES2015 shorthand for SomeComponent: SomeComponent
            SomeComponent
        }
    }
</script>

利用本地组件注册

默认导出和SomeComponent都是组件定义对象。

- Marek Dulowski

Answer 3

实际上您可以通过以下简单步骤实现：

注册您的组件:

Vue.component('message', {
    template: '<div>A custom component!</div>'
});

然后在您的Vue实例中注释掉render函数，如下所示：

new Vue({
  el: '#app',
  // render: h => h(App)
})

之后，您将能够像这样呈现您的消息标签：

<div id="app">
      <message></message>
</div>

编辑：如果您不想使用这种方式，您可以在您的视图实例中定义它：

new Vue({
  el: '#app',
  // render: h => h(App)
  components: {
    message: {
     template: `
    <h1>Hello World</h1>
        `
    }
  }
})

- Amr Aly

---

我想做的是使用<template></template>而不是使用Vue.component...。 - Moshe

请查看此链接（https://developer.mozilla.org/en/docs/Web/HTML/Element/template），但是需要大量的js代码。我已经更新了我的答案，因此如果您想在vue实例中注册组件，请参考。 - Amr Aly

如果我理解正确，您的意思是 Vue.component('message', {template: '<div>自定义组件！</div>'}); 会生成比具有以下代码 <template><divA 自定义组件！</div></template> 的 message.vue 文件更小的 js 文件，然后我使用如下导入：import Message from './message.vue'. 是这样吗？ - Moshe

如果您使用 Vue.Component，那么这个组件将在整个应用程序中可用，您可以在任何地方渲染它。但是，如果您在另一个组件中注册它，那么它只能在该组件中使用。当我说如果您想创建一个模板而不使用 vue 框架或任何需要大量原始 js 代码的框架时，这意味着框架正在为我们做什么。 - Amr Aly