带烤肉串盒的vue全局组件

Question

我正试图在全球注册我经常使用的组件。我已经开始使用kebab外壳，因为我正在将css、js和vue文件拆分起来，所以我想修改我现有的注册脚本，如下所示：

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
  "./components",
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
);

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

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      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
  );
});

从那以后，我在这里又发现了一个：

https://raw.githubusercontent.com/bencodezen/vue-enterprise-boilerplate/main/src/components/_globals.js

我已将其修改如下：

// Globally register all base components for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.

import Vue from "vue";

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
  // Look for files in the current directory
  "./components",
  // Do not look in subdirectories
  true,
  // Only include "_base-" prefixed .vue files
  /base-[\w-]+\.vue$/
);

// For each matching file name...
requireComponent.keys().forEach((fileName) => {
  // Get the component config
  const componentConfig = requireComponent(fileName);
  // Get the PascalCase version of the component name
  const componentName = fileName
    // Remove the file extension from the end
    .replace(/\.\w+$/, "")
    // Split up kebabs
    .split("-")
    // Upper case
    .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    // Concatenated
    .join("");

  console.log(componentName);

  // Globally register the component
  Vue.component(componentName, componentConfig.default || componentConfig);
});

但是如果我试着用我的组件，它们就不能工作。我有一个简单的定义如下：

import { defineComponent } from "@vue/composition-api";

export default defineComponent({
  name: "BaseToggle",
  props: {
    open: {
      type: Boolean,
    },
    color: {
      type: String,
    },
  },
});

如果我尝试在其他组件中使用它，像这样：

<base-toggle color="white" />

甚至是

<BaseToggle color="white" />

我知道这个错误：

​

​

有人知道可能出了什么问题吗？

该组件被分成3个文件。

• base-toggle.component.scss
• base-toggle.component.ts
• base-toggle.component.vue

并且它存在于文件夹./components/base-toggle中。因此，我更新了我的脚本：

// Globally register all base components for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.

import Vue from "vue";

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
  // Look for files in the current directory
  "./components",
  // Do not look in subdirectories
  true,
  // Only include "_base-" prefixed .vue files
  /base-[\w-]+\.component.vue$/
);

// For each matching file name...
requireComponent.keys().forEach((fileName) => {
  // Get the component config
  const componentConfig = requireComponent(fileName);
  // Get the PascalCase version of the component name
  const componentName = fileName
    // Remove the file extension from the end
    .replace(".component.vue", "")
    // Split up kebabs
    .split("-")
    // Upper case
    .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    // Concatenated
    .join("");

  console.log(componentName);

  // Globally register the component
  Vue.component(componentName, componentConfig.default || componentConfig);
});

但这仍然不起作用。

Answer 1

原来是因为那个文件夹。我更新了我的脚本如下：

// Globally register all base components for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.

import Vue from "vue";

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
  // Look for files in the current directory
  "../components",
  // Do not look in subdirectories
  true,
  // Only include "_base-" prefixed .vue files
  /base-[\w\-.]+\.vue$/
);

// For each matching file name...
requireComponent.keys().forEach((fileName) => {
  // Get the component config
  const componentConfig = requireComponent(fileName);
  // Get the PascalCase version of the component name
  const componentName = fileName
    // Remove any folder name
    .split("/")[1]
    // Remove the file extension from the end
    .replace(".component.vue", "")
    // Split up kebabs
    .split("-")
    // Upper case
    .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    // Concatenated
    .join("");

  console.log(componentName);

  // Globally register the component
  Vue.component(componentName, componentConfig.default || componentConfig);
});

在@Michal的帮助下，我更改了regex，现在它是这样的：

// Globally register all base components for convenience, because they
// will be used very frequently. Components are registered using the
// PascalCased version of their file name.

import Vue from "vue";

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
  // Look for files in the current directory
  "../components",
  // Do not look in subdirectories
  true,
  // Only include "_base-" prefixed .vue files
  /base-[\w-.]+\.vue$/
);

// For each matching file name...
requireComponent.keys().forEach((fileName) => {
  // Get the component config
  const componentConfig = requireComponent(fileName);
  // Get the PascalCase version of the component name
  const componentName = fileName
    // Remove any folder name
    .split("/")[1]
    // Remove the file extension from the end
    .replace(/\.\w+$/, "")
    // Split up kebabs
    .split("-")
    // Upper case
    .map((kebab) => kebab.charAt(0).toUpperCase() + kebab.slice(1))
    // Concatenated
    .join("");

  console.log(componentName);

  // Globally register the component
  Vue.component(componentName, componentConfig.default || componentConfig);
});