Vue.js 如何访问HTML文件中的Vue加载程序组件

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

我不知道怎么做（或者是否可能）的是在html文件中使用我的自定义模板

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

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

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

你好

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

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

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

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

你好

你知道我该怎么做吗？谢谢

---

注意：我是Vue Loader的新手，也是Vue的半新手（因此，如果这个问题的答案显而易见，我提前表示歉意）。

实际上，您可以通过以下方式轻松做到这一点：

注册您的组件：

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

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

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

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

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

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>
        `
    }
  }
})

newvue({
el:“#应用程序”，
//渲染：h=>h（应用程序）
组成部分：{
信息：{
模板：`
你好，世界
`
}
}
})

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

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

这将编译一个公开MyComponent的脚本。如果在页面中包含该脚本，然后全局添加

Vue.component(MyComponent)

您可以在任何VUE中使用该组件

制作插件 下面是制作插件的一个非常基本的框架示例

myPluginDefinition.js

window.MyPlugin= {};

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

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

webpack.config.js

window.MyPlugin= {};

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

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来构建单个文件组件。您可以将它们全部构建到单个文件中，也可以单独构建它们。我建议如果您想使用这些选项中的一个，您可以问一个单独的问题。

导入所需的组件定义对象，并将其传递给

options.components

...
从“path/to/some component.vue”导入SomeComponent；
导出默认值{
组成部分：{
//ES2015 SomeComponent的简写：SomeComponent
某些成分
}
}

利用

---

默认导出和

SomeComponent

都是组件定义对象。

不过，我想做的是使用

而不是使用

Vue.component…

。检查一下，但是它需要很多js代码。我已经更新了我的答案，所以如果您想在vue实例中注册组件。如果我理解正确，您说的是

vue.component（'message'，{template:'A custom component！'}）vue.Component

则此组件将在整个应用程序中可用，您可以在任何地方渲染它，但如果您在另一个组件中注册它，则此组件将仅适用于已在其中注册的组件。当我说如果你想创建一个模板而不使用

vue

框架或任何需要大量普通js代码的框架时，这意味着什么呢？因为这些框架是为我们做的。听起来你想使用单文件组件语法编写组件，但是在VUE中使用在HTML页面的脚本标记中创建的组件。“对吗？”我想是的。基本上，我希望有一个html页面，可以调用单个js文件，并使用自定义组件标记在正常的html流中呈现组件。例如，

这是一条信息

。