在子文件夹中的Vuejs中全局注册组件 [英] Registering components globally in Vuejs in subfolders

问题描述

我已经按照 Vuejs 网站上的文档学习了如何全局注册 vue 组件.

I have followed the documentation on the Vuejs website to learn how to register vue components globally.

我已经定义了 components 文件夹的相对路径是 ./global 并设置为在子文件夹中查找为 true(默认为 false).但是，它仍然不会查看子文件夹.

I have defined that the relative path of the components folder is ./global and set to look in subfolder to true (default false). However, it still doesn't look into subfolders.

我还控制台.记录了组件键以查看是否包含任何 vue 组件，但它只返回全局(根)文件夹中的组件.

I have also console.logged the components keys to see if any vue components are included, but it only returned the components in the global (root) folder.

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
  )
})

推荐答案

为了达到同样的结果，我最终写了以下内容:

Here is what I ended up writing to achieve this same outcome:

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.

Make sure all of you files in global are capitalized and have a .vue or .js extention.

此外，使用您提供的路径，确保 main.js(或任何您的引导程序文件)位于全局变量的一个目录上.示例:

Also with the path you provided make sure that main.js (or whatever your bootstrap file is called) lives one directory up from globals. Example:

/src主文件/全局

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

This will make the a file such as ProgressBar.vue globally available in all of your components as ProgressBar

<ProgressBar></ProgressBar>

这篇关于在子文件夹中的Vuejs中全局注册组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！