Question

我试图按需渲染vue组件。应用程序由4个部分组成，每个部分只有在调用某个函数后才应呈现给DOM，如renderProducts()

我使用webpack 2和最新的vue-loader（+ Vuex，Vuei18n，...）问题是，这只适用于使用独立版本（使用vue的webpack别名：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);
}

感谢您提供任何帮助或建议！

按需渲染预编译的Vue.js组件（webpack 2）

0 个答案: