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

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).

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.

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.

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.

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).

解决方案

There are many ways you can compile a single file component and then use that component in a web page.

Use vue-cli

Vue released a command line interface tool called vue-cli that can initialize projects and build components with zero configuration. One option to build a component that you can use in your page is to use vue build.

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

This will compile a script that exposes MyComponent. If you include that script in your page and then add it globally,

Vue.component(MyComponent)

That component will be available to you in any of your Vues.

Make a plugin

Here is a sample of a very basic framework for making a plugin.

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',
        }
        ]
    }
};

This will build a file called MyPlugin.js that will contain each of the single file components that you include in the install function. Include the script on your page and then call

Vue.use(MyPlugin)

and you will have all of your components.

Use a custom webpack configuration

There are many ways you could configure webpack to build your single file components. You could build them all into a single file or build them separately. I suggest if you want to use one of these options you ask a separate question.