适用于非SPA应用程序的Vue js - 使用应用程序组件加载组件

Question

我非常了解vs，我正在努力找出一些关于它的事情。我想用它做的一件事是在不创建SPA的情况下实现组件。换句话说，我可以引用静态页面中的组件，而不必让它通过App组件运行。

当我用反应Js完成这个时，我已经使用了反应栖息地。我想知道是否有类似的vue js可用或者你可以用第三方模块工具做的事情。

Answer 1

您不需要任何App组件。只需将任何包装器（div）分配给Vue模块（Vue实例）。例如，我使用一个组件来检索联系人。您可以在一个页面中拥有多个Vue应用程序。他们只是不能重叠。HTML：<div&nbsp;class="col-md-4&nbsp;col-sm-4"&nbsp;id="safeContactsFooter"> &nbsp;..some&nbsp;html&nbsp;stuff &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="phone"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>Phone:&nbsp;<safe-contact&nbsp;type="phone"&nbsp;></safe-contact></li>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul></div>Vue模块：export&nbsp;default&nbsp;new&nbsp;Vue({ &nbsp;&nbsp;&nbsp;&nbsp;el:&nbsp;'#safeContactsFooter', &nbsp;&nbsp;&nbsp;&nbsp;components&nbsp;:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'safe-contact'&nbsp;:&nbsp;()&nbsp;=>&nbsp;import('./components/Safe&nbsp;contact')&nbsp;, &nbsp;&nbsp;&nbsp;&nbsp;},});然后，只有在存在具有正确ID的div时才必须注册模块。否则，控制台会对您大喊该对象不存在。我是这样做的：if(document.getElementById("safeContactsFooter")){ &nbsp;&nbsp;&nbsp;&nbsp;import('../Safe&nbsp;contacts/Safe&nbsp;contacts&nbsp;footer.Module.js');}

Answer 2

您可以通过将组件导入JavaScript文件并使用引用的元素创建vue实例来实现：// JS Fileimport Vue from 'vue';import YourComponent from './YourComponent.vue';export default new Vue({&nbsp; &nbsp;el: '#app',&nbsp; &nbsp;components: {&nbsp;&nbsp; &nbsp; &nbsp;YourComponent&nbsp; &nbsp;}});// HTML file<div id="app">&nbsp; <your-component></your-component></div>