考虑一下 wordpress 博客或包含一些内容的标准 CMS。我使用所见即所得的编辑器（CKEditor）来编写我的内容并将它们保存到数据库。
我想在这个 HTML 中使用一些 Vue 组件，所以我在我的主题中添加了一个包装器 div。 HTML 页面由
包装<div id="#my-custom-app">
...html from server
</div>
基本上我想添加例如
<my-app-image-compare></my-app-image-compare>
在我的 HTML 中使用 CKEditor，然后我将创建一个安装在 #my-custom-app div 上的应用程序。我将在 html 正文的末尾插入应用程序。
Vue.app文件没有模板，模板基本上是我用CKEditor写的HTML页面，但是每个组件都是由app加载和定义的，每个组件都有一个模板。
我该怎么办？有没有办法在没有定义模板的情况下拥有一个主 Vue 应用程序文件？
【问题讨论】：
首先在一个基本模板上创建一个 vue 容器。然后，此模板将加载一个组件，该组件从服务器获取您的数据并显示它，因此：
// This is your main vue instance container
<div id="#my-custom-app">
<dynamic-html v-if="myHtmlFromServer" template="myHtmlFromServer"></dynamic-html>
</div>
在这个主要组件中，您需要连接 created 事件并使用编辑器中的 HTML 内容填充 myHtmlFromServer。
import DynamicHtml from './myComponents/DynamicHtml'
new Vue({
el: '#my-custom-app',
data () {
return {
myHtmlFromServer: ''
}
},
components: {
DynamicHtml
}
created () {
// this.myHtmlFromServer = this.getDataFromServer()
}
})
<dynamic-html> 组件将具有props: ['template']，并且在创建的事件上将分配this.$options.template = this.template。
此选项将设置该组件的 HTML 模板并允许 Vue 正常渲染它（这意味着您可以在 CKEditor 中执行 {{someVal}}。
另一种选择是，如果您使用像 PHP 这样的服务器端语言，那么您可以将该 html 放在页面上，即echo $myHtmlContent，只要该内容包含<div id="#my-custom-app">，您的 Vue 实例就会挂载。 PHP 会在 JS 处理页面之前将 HTML 添加到页面中，这样它就可以正常工作了。
【讨论】：