如何在普通 HTML 或 JSP 文件中集成 Vue 组件 [英] How to integrate Vue components in normal HTML or JSP file
问题描述
通过 Vue CLI 我创建了一个 Vue 应用程序.在这个应用程序中，我开发了一个围绕 Highcharts 图的组件.我将这个组件命名为 BoilerGraph 并且在 App.vue 文件中我可以这样使用它:
<div id="应用程序"><BoilerGraph period="2016" 副标题="问题年"></BoilerGraph><BoilerGraph period="2019" ></BoilerGraph></模板><脚本>从 './components/BoilerGraph' 导入 BoilerGraph导出默认{名称:'应用'，成分: {锅炉图}}
到目前为止一切都很好，但是如何在普通"独立 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 文件.我想找出哪些 JavaScript 文件必须链接到独立的 HTML 文件中才能在那里使用我的组件.
如果你想在独立的 HTML 文件中使用 vue.我猜你不能使用 SPA 结构来实现你的目标.相反，您应该使用 html 模板并从 CDN 导入 vue.
<BoilerGraph period="2016" 副标题="问题年"></BoilerGraph><BoilerGraph period="2019" ></BoilerGraph><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">您的 BoilerGraph 模板在这里！</div><脚本>Vue.component('BoilerGraph', {模板:'#BoilerGraph'，props: ...//你的其他道具需要通过});新的 Vue({el: '#app',})
Via the Vue CLI I have craeted a Vue app. And in this app I have a developed a component around an Highcharts graph. This component I have named BoilerGraph and in the App.vue file I can use it like this:
<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>
So far so good, but how can I use the component BoilerGraph in a "normal" standalone HTML file (or for that matter in a JSP file)? What files (and in what order) do I have to link into the HTML file via the usual <link href="... tag lines?
Or if these script files don't exist separately by default (a normal vue build seem to compress everything into one dist.js file), how can I instruct vue or webpack to create exactly the files I can link into a normal HTML file in order to use there the BoilerGraph component?
Note: I saw the question How to Access Vue-Loader Components in an HTML File but the answers only seem to show how to generate a vue component for a vue app, not for a normal HTML file. I want to find out which JavaScript files I have to link into the standalone HTML file to use my component there.
If you want to used vue in the standalone HTML file. I guessed you can not used SPA structure to achieved your goal. Instead, you should use html template and import vue from CDN.
<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>
这篇关于如何在普通 HTML 或 JSP 文件中集成 Vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
