Question

我已遵循Vuejs网站上的文档，以学习如何在全球范围内注册vue组件。

我已定义components文件夹的相对路径为./global，并设置为在子文件夹中查找true（默认为false）。但是，它仍然没有研究子文件夹。

我还用console.logging了组件键，以查看是否包含任何vue组件，但是它只返回了全局（根）文件夹中的组件。

https://vuejs.org/v2/guide/components-registration.html

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

const requireComponent = require.context(
  // The relative path of the components folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base component filenames
  /[A-Z]\w+\.(vue|js)$/
)

console.log(requireComponent.keys())

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

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

Answer 1

这是我最终为达到相同结果而写的内容：

const requireComponent = require.context(
  // The relative path of the components folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base component filenames
  /[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)
  // Get PascalCase name of component
  const componentName = Vue._.upperFirst(
    Vue._.camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

确保全局中的所有文件都大写并具有.vue或.js扩展名。

还要使用您提供的路径来确保main.js（或任何您的引导文件）位于全局目录上。示例：

/ src main.js / global

这将使诸如ProgressBar.vue之类的文件作为ProgressBar在所有组件中全局可用

<ProgressBar></ProgressBar>

Answer 2

@Anson C

const requireComponent = require.context(
  // The relative path of the components folder
  './global',
  // Whether or not to look in subfolders
  true,
  // The regular expression used to match base component filenames
  /[A-Z]\w+\.(vue|js)$/
)

此代码完全按预期工作。意味着它将按预期返回子文件夹中的所有文件（例如 ./Base/BaseInput.vue 将返回 BaseInput）。但是要导入这些文件，您还必须添加相应的路径。

// Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

这只会导入 ./BaseInput，它不是准确的路径，应该是 ./Base/BaseInput。

用于：

// Get PascalCase name of component
  const componentName = Vue._.upperFirst(
    Vue._.camelCase(
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

此代码返回文件和文件夹的完美路径。

在子文件夹的Vuejs中全局注册组件

2 个答案: