如何在HTML文件中访问Vue-Loader组件 [英] How to Access Vue-Loader Components in an HTML File

问题描述

我想使用Vue Loader的模块化样式和文件格式(即，每个.vue文件中都有一个模板部分，脚本部分和样式部分).

I would like to use the modular style and file format of Vue Loader (i.e., where I have a template section, script section and style section in each .vue file).

我不知道如何做(或者甚至有可能做)的是在html文件中使用我的自定义模板.

What I can't figure out how to do (or if it is even possible to do) is use my custom templates in an html file.

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

For instance, in the App.vue file I can use the following code:

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

这将在主页上显示自定义消息组件.

This will work to display a custom message component on the home page.

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

What I would like to do instead is use my custom components in html files. For instance, in the index.html file to use the following code:

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

有人知道我该怎么做吗?谢谢.

Any idea how I can do this? Thanks.

注意:我是Vue Loader的新手，而Vue是新手(因此，如果对这个问题的答案很明显，我会提前道歉).

NOTE: I am new to Vue Loader and semi-new to Vue (so I apologize in advance if the answer to this question is obvious).

推荐答案

导入所需的组件定义对象并将其传递给options.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都是组件定义对象.

Both the default export and SomeComponent are component definition objects.

这篇关于如何在HTML文件中访问Vue-Loader组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！