Vue.js и структурирование многостраничных веб-приложений - регистрация компонентов

Question

Я хочу использовать Vue.js для многостраничного веб-приложения MVC Core 2.1, но я думаю, что мой подход немного странный.

Я много искал для лучшего способа структурировать мой код. Я также взглянул на то, как это делает PHP Laravel 5.x, и похоже, что они используют тот же подход, что и тот, который я использую, вроде.

Мой подход

Я создал файл main.js, в котором я глобально регистрирую некоторые компоненты, а те, которые используются только определенными компонентами, будут, конечно, регистрироваться только локально. Таким образом, практически каждая страница будет иметь свой собственный зарегистрированный компонент ... (кстати, я использую Webpack)

import Vue from 'vue';
import Axios from 'axios';

import BaseLayout from './components/layout/BaseLayout.vue';
import BaseHeaderLayout from './components/layout/BaseHeader.vue';

import HomeIndex from './components/home/Index.vue';
import HomeCreate from './components/home/Create.vue';

import 'bootstrap/dist/css/bootstrap.css';

window.axios = Axios; // Make axios available throughout (assign as global variable)

// Layout components
Vue.component("base-layout", BaseLayout);
Vue.component("base-header", BaseHeaderLayout);

// Home/
Vue.component("home-index", HomeIndex);
Vue.component("home-create", HomeCreate);

new Vue({
    el: "#App"
});

По мере роста веб-приложения, я думаю, этот файл станет массовым - наполненным регистрациями компонентов. Поэтому мой вопрос: Есть ли другой способ сделать это?

Answer 1

Что вы можете сделать, это инициализировать приложение Vue в определенных частях страницы, поместив их в контейнер своего рода, а затем сделать то же самое для всех страниц, для которых требуются компоненты Vue.

Я делаю это таким образом, у меня есть контейнерный класс, называемый vue-container, который упаковывает мои вызовы компонентов следующим образом:

<div class="vue-container">
  <floating-menu></floating-menu>
  <show-pdf :resource="<%= @resource.as_json(current_user: current_user) %>"></show-pdf>
</div>

Здесь плавающее меню и show-pdf являются двумя компонентами Vue.

Затем в моем файле app.js, который импортирован для всех страниц, у меня есть следующий код:

if(window.vueapp == null){
  window.vueapp = []
}
if(window.vueapp != null){
  for(var i=0, len=vueapp.length; i < len; i++){
    vueapp[i].$destroy();
  }
  window.vueapp = []
}
var myNodeList = document.querySelectorAll('.vue-container');
forEach(myNodeList, function (index, element) {
  if (element != null) {
    var vueapp = new Vue({
      el: element,
      store,
      components: {
        ShowPdf, FloatingMenu
      }
    })
    window.vueapp.push(vueapp);
  }
});

Это создает и инициализирует приложение Vue для каждого элемента .vue-container, и все работает!

Если вам нужно обмениваться данными между различными компонентами, любой из стандартных методов обмена данными, таких как Event Bus или Vuex, будет работать просто отлично.

Я написал сообщение в блоге, подробно описывающее эту настройку: https://blog.koley.in/2018/vue-components-in-multi-page-apps

Answer 2

вы можете использовать vue-cli для структурирования вашего проекта (https://github.com/vuejs/vue-cli), который теперь является версией-кандидатом на выпуск и по умолчанию интегрирует веб-пакет. С помощью команды "vue create my-project" вы увидите красивый каркас из ваш проект. В main.js вы бы поместили только корневой компонент. Извините за плохое форматирование, я нахожусь на мобильном телефоне.