用于非 SPA 应用程序的 Vue js - 在没有应用程序组件的情况下加载组件

Question

我对 Vue.js 很陌生，我正试图弄清楚一些关于它的事情。我想使用它的一件事是在不创建 SPA 的情况下实现组件。所以换句话说，我可以引用静态页面中的组件，而不必让它通过 App 组件运行。

当我使用 react js 完成此操作时，我使用了 react 栖息地。我想知道 Vue.js 是否有类似的东西可用，或者你可以在没有第三方模块工具的情况下做些什么。

Answer 1

您不需要任何 App 组件。只需将任何包装器 (div) 分配给 Vue 模块（Vue 实例）。例如，我使用一个组件来检索联系人。

您可以在一页中拥有多个 Vue 应用程序。它们只是不能重叠。

html：

<div class="col-md-4 col-sm-4" id="safeContactsFooter">
 ..some html stuff

     <ul class="phone">
         <li>Phone: <safe-contact type="phone" ></safe-contact></li> 
     </ul>

</div>

Vue 模块：

export default new Vue({
    el: '#safeContactsFooter',

    components : {
        'safe-contact' : () => import('./components/Safe contact') ,
    },

});

然后，您必须仅在具有正确 ID 的 div 存在时才注册模块。否则，控制台会向您大喊该对象不存在。我这样做：

if(document.getElementById("safeContactsFooter")){
    import('../Safe contacts/Safe contacts footer.Module.js');
}

Answer 2

您可以通过将组件导入 JavaScript 文件并使用引用的元素创建 vue 实例来做到这一点：

// JS File
import Vue from 'vue';

import YourComponent from './YourComponent.vue';

export default new Vue({
   el: '#app',
   components: { 
     YourComponent
   }
});


// HTML file
<div id="app">
  <your-component></your-component>
</div>