如何访问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的半新人（所以如果这个问题的答案很明显，我会事先道歉。）

Answer 1

实际上你可以通过以下方式轻松完成：

注册您的组件：

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

然后对您render个实例中的Vue函数进行评论，如下所示：

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

Answer 2

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

使用vue-cli

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

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

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

Vue.component(MyComponent)

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

制作插件

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

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

Answer 3

导入所需的组件定义对象并将其传递给public Page<EpisodeDashboard> getPage(int pageNumber, int pageSize, Sort sort, PaginationCriteria pagination) { BooleanBuilder where = new BooleanBuilder(); if (pagination.getFilterBy().getMapOfFilters().get("eventno")!=null) { where.and(qEpisode.eventno.containsIgnoreCase(pagination.getFilterBy().getMapOfFilters().get("eventno"))); } if (pagination.getFilterBy().getMapOfFilters().get("address")!=null) { where.and(qEpisode.address.formattedAddress.containsIgnoreCase(pagination.getFilterBy().getMapOfFilters().get("address"))); } List<Episode> e = episodeRepository.findAll(where);

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> 都是组件定义对象。