Question

通过Vue CLI我已经创建了一个Vue应用。在这个应用程序中，我围绕Highcharts图开发了一个组件。我已将此组件命名为BoilerGraph，在App.vue文件中，我可以这样使用它：

<template>
    <div id="app">
        <BoilerGraph period="2016" subtitle="Problem Year"></BoilerGraph>
        <BoilerGraph period="2019" ></BoilerGraph>
    </div>
</template>

<script>
    import BoilerGraph from './components/BoilerGraph'

    export default {
        name: 'app',
        components: {
            BoilerGraph
        }
    }
</script>

到目前为止，还不错，但是如何在“正常”独立HTML文件中（或者与此相关的JSP文件中）使用组件BoilerGraph？我必须通过常规的<link href="...标记行将哪些文件（以什么顺序）链接到HTML文件？

或者，如果默认情况下这些脚本文件不单独存在（正常的vue build似乎将所有内容压缩到一个dist.js文件中），我如何指示vue或webpack完全创建文件可以链接到普通HTML文件以便在其中使用BoilerGraph组件？

注意：我看到了问题How to Access Vue-Loader Components in an HTML File，但答案似乎仅显示了如何为vue应用生成 vue组件 ，而普通的HTML文件。我想找出必须链接到独立HTML文件中的JavaScript文件才能在其中使用我的组件。

Answer 1

如果要在独立HTML文件中使用vue。我猜想您不能使用SPA结构来实现您的目标。相反，您应该使用html模板并从CDN导入vue。

<div id="app">
  <BoilerGraph period="2016" subtitle="Problem Year"></BoilerGraph>
  <BoilerGraph period="2019" ></BoilerGraph>
</div>    

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
<script type="text/x-template" id="BoilerGraph">
  <div class="BoilerGraph">your BoilerGraph template at here!</div>
</script>

<script>
  Vue.component('BoilerGraph', {
    template: '#BoilerGraph',
    props: ... // Your other props need to pass
  });

  new Vue({
    el: '#app',
  })
</script>

如何将Vue组件集成到普通HTML或JSP文件中

1 个答案: