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