1

我正在尝试按需渲染 vue 组件。应用程序由 4 个部分组成，每个部分都应该在调用某个函数后渲染到 DOM，例如renderProducts()

我正在使用带有最新 vue-loader 的 webpack 2 (+ Vuex, Vuei18n, ...) 问题是，这仅在使用独立构建时有效（使用 webpack 别名为 vue: vue: 'vue/dist/vue.js'）。

但我认为我可以做得更好，并使用仅运行时构建（并节省一些千字节）。

任何人都知道，我做错了什么？这是我的应用程序入口点（仅显示相关部分）：

import './index.scss';
import Vue from 'vue';

import MenusComponent from './components/menus/_menus-root.vue';
import CartComponent from './components/cart/_cart-root.vue';
import NavigationComponent from './components/navigation/_navigation-root.vue';
import LocationInfoComponent from './components/location-info/_location-info-root.vue';

...

const menus = new Vue({ name: 'menus-root', render: h => h(MenusComponent), store });
const cart = new Vue({ name: 'cart-root', render: h => h(CartComponent), store });
const navigation = new Vue({ name: 'navigation-root', render: h => h(NavigationComponent), store });
const locationInfo = new Vue({ name: 'location-info-root', render: h => h(LocationInfoComponent), store });

...

window.renderMenus = ({ el }) => {
  menus.$mount(el);
},
window.renderCart = ({ el }) => {
  cart.$mount(el);
},
window.renderNavigation = ({ el }) => {
  navigation.$mount(el);
},
window.renderLocationInfo = ({ el }) => {
  locationInfo.$mount(el);
}

感谢您的任何帮助或建议！

4

0 回答 0