Vue JS для не SPA-приложений - загрузка компонентов без компонента приложения

Я очень хорошо знаю Vue JS, и я пытаюсь выяснить несколько вещей об этом. Одна из вещей, для которых я хотел бы использовать это, состоит в том, чтобы реализовать компоненты без создания SPA. Другими словами, я могу сделать ссылку на компоненты статической страницы без необходимости запускать ее через компонент приложения.

Когда я сделал это с помощью команды «Реакция Дж», я использовал среду обитания «Реакция». Мне интересно, есть ли что-то похожее для vue js, которое доступно или это можно сделать с помощью стороннего модуля-инструмента.

Всего 2 ответа


Вам не нужен компонент приложения. Просто назначьте любую оболочку (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') ,
    },

});

Затем вы должны зарегистрировать модуль только при наличии div с правильным идентификатором. В противном случае консоль будет кричать вам, что объект не существует. Я делаю это так:

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

Вы можете сделать это, импортировав ваши компоненты в файл 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>

Есть идеи?

10000