Question

是否有方便的方法导入常用组件？

当我编写组件时，如果需要导入其他组件，我将逐个导入并注册它们：

import MyButton from './myButton'
import MyInput from './myInput'
import MyIcon from './myIcon'


export default {
  components: {
    MyButton,
    MyInput,
    MyIcon
  }
}

是否有一种简单的方法可以导入它们？

Answer 1

您只需使用webpack函数创建上下文，然后自动导入。

在common_components.js目录中创建一个components文件：

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

// find all the *.vue under the `components` directory
const requireComponent = require.context(
  '.', false, /\.vue$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

然后在main.js导入common_components.js，您现在可以使用components目录下的所有组件。

寻找一种方便的方法来导入组件中常用的组件？

1 个答案: