Question

import Vue from 'vue'

import { 
         Button, 
         Select,
         Table,
         Form, 
        } from 'element-ui'


import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

// Used by admin section of the website
Vue.component(Table.name, Table)
Vue.component(Form.name, Form)

const routes = [
    { path: '/', component: Home },
    { path: '/admin', meta: { requiresAuth: true }, component: Admin},
];

new Vue({
  el: '#app',
  render: h => h(App)
})

我正在为每个人使用组件按钮和选择，但我只使用表格和表格仅用于管理页面。 admin部分是一个包含其他组件的Vue组件。

这是一个问题。由于我想通过Webpack优化捆绑构建的大小，如何在默认情况下导入导入按钮和选择，但是如果到达管理部分，我可以导入表格和表格吗？

我想我需要在Webpack中拥有多个块，但我不知道该怎么做。

谢谢

Answer 1

你是对的，你需要将你的文件分成几个。你应该看一下single files component。

这样您就可以在组件级别管理依赖项。

如果你对通行费感觉更加舒适，可以为你自动配置（几乎）一切，vue-cli就是你需要的工具。

Answer 2

我在Vue Router文档中错过了

const Foo = resolve => {
  // require.ensure is Webpack's special syntax for a code-split point.
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

Vue 2 - 按需导入

2 个答案: