Как интегрировать компоненты Vue в обычный файл HTML или JSP
Через Интерфейс командной строки 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>
Пока все хорошо, но как я могу использовать компонент BoilerGraph в «обычном» автономном файле HTML (или, если уж на то пошло, в файле JSP)? Какие файлы (и в каком порядке) мне нужно связать с файлом HTML с помощью обычных тегов <link href = "...?
Или, если эти файлы сценариев не существуют отдельно по умолчанию (обычный vue build, кажется, сжимает все в один dist.js файл), как я могу указать vue или webpack создавать именно те файлы, которые я могу связать в обычный файл HTML, чтобы использовать там компонент BoilerGraph?
Примечание: Я видел вопрос Как получить доступ к компонентам Vue-Loader в файле HTML, но ответы, кажется, только показывают, как создать компонент vue для vue-приложения, не для обычного файла HTML. Я хочу узнать, какие файлы JavaScript мне нужно связать с автономным HTML-файлом, чтобы использовать там мой компонент.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы хотите использовать vue в отдельном файле HTML. Я догадался, что вы не можете использовать структуру SPA для достижения своей цели. Вместо этого вы должны использовать шаблон html и импортировать vue из CDN.
<div id = "app">
<BoilerGraph period = "2016" subtitle = "Problem Year"></BoilerGraph>
<BoilerGraph period = "2019" ></BoilerGraph>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/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>
Спасибо за это. Однако я не понимаю, что происходит в «ваш шаблон BoilerGraph здесь». Мой компонент BoilerGraph содержит часть шаблон, часть сценарий и часть стиль — все они объединены в файл .vue. Могу ли я каким-то образом сказать vue/webpack преобразовать это в обычный файл Javascript для включения?
«Ваш шаблон BoilerGraph здесь» означает, что вы должны поместить сюда свою часть шаблона. Тем не менее, я думаю, что комментарии CMS - лучший ответ для вас. Кажется, вы можете преобразовать компонент vue в файл .js, используя библиотека @vue/веб-компонент-обертка. Поэтому вы можете использовать его непосредственно в html-файле.
В ссылке CMS упоминается, что «таким образом вы можете добавить свой компонент vue в свой проект, отличный от vuejs». Однако мой проект представляет собой автономную библиотеку vuejs 2.0. Смогу ли я использовать события, щелкнутые в этом обернутом компоненте, в структуру vue js этой страницы (методы, вычисляемые и т. д.)?
Vue.component('BoilerGraph' имя должно быть boilergraph, без заглавных букв. В противном случае <BoilerGraph></BoilerGraph> должно быть <boiler-graph></boiler-graph>более осязаемый пример, основанный на @bcjohn
<div id = "app">
<boiler-graph period = "2016" subtitle = "Problem Year"></boiler-graph>
<boiler-graph period = "2019"></boiler-graph>
</div>
<script type = "text/x-template" id = "BoilerGraph">
<div class = "BoilerGraph">{{period}} - {{subtitle}}</div>
</script>
<scrpt>
Vue.component('BoilerGraph', {
template: '#BoilerGraph',
props: ['period','subtitle']
});
new Vue({
el: '#app',
})
</script>
Вы можете сгенерировать веб-компоненты из компонентов Vue, используя библиотеку @vue/веб-компонент-обертка, отметьте это руководство.