Question

在我的项目中，我有一个名为views的文件夹，对于spa中的视图，我试图避免手工导入每个元素，这有可能吗？

声明组件，我研究了这种方法。

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], 
                files(key).default))

如果语法是该怎么做

import  Home from '../views/Home ';

我尝试了这个，因为这是个主意，但是显然这标志着我的错误，什么是最佳解决方案？

const files = require.context('../views/', true, /\.vue$/i)
files.keys().map(key => {
    import  key.split('/').pop().split('.')[0] from '../views/'+  files(key);
})

/* Routers */
export default  [
/* Rutas de Venta venta */
{ 
    path: '/', 
    name: 'home',
    component: Home,
},

Answer 1

Chris Fritz进行了一次演讲，其中explain it

他的演示文稿位于github

我对这段代码不太了解，但是可以正常工作

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

// Require in a base component context
const requireComponent = require.context(
    './components', false, /base-[\w-]+\.vue$/
);

requireComponent.keys().forEach(fileName => {
    // Get component config
    const componentConfig = requireComponent(fileName)

    // Get PascalCase name of component
    const componentName = upperFirst(
        camelCase(filename.replace(/^\.\//,'').replace(/\.\w+$/, ''))
    )

    // Register component globally
    Vue.component(componentName, componentConfig.default || componentConfig)
})

如何导入组件以使用Vue和VueRouter将它们添加到路由

1 个答案: