Vue自动生成组件示例总结

# Yarn
$ yarn add unplugin-generate-component-name -D
# pnpm
$ pnpm i unplugin-generate-component-name -D

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'
export default defineConfig({
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
})

// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'
export default {
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-generate-component-name/webpack').default({ /* options */ }),
  ],
}

src/home/
├── index.vue // 组件名称是 Home
├── about.vue
└── users/
    ├── index.vue // 组件名称是 Users
    └── info.vue

<template>
  <!-- 你的组件标记 -->
</template>
<script setup name="Home">
  // 你的脚本逻辑
</script>
<style>
  <!-- 你的组件样式 -->
</style>

type GenComponentName = (opt: {
    filePath: string;
    dirname: string;
    originalName: string;
    attrName: string | undefined;
}) => string;
interface PattenOptions {
    include?: string | RegExp | (string | RegExp)[];
    exclude?: string | RegExp | (string | RegExp)[];
    genComponentName: GenComponentName;
}
interface Options extends Omit<PattenOptions, 'genComponentName'> {
    enter?: PattenOptions[];
}

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'
export default defineConfig({
  plugins: [
     GenerateComponentName({
      include: ['**/*.vue'],
      enter: [{
        include: ["**/*index.vue"],
        genComponentName: ({ attrName, dirname }) => attrName ?? dirname
      }, {
        exclude: ['**/*.index.vue'],
        include: ["src/components/**/*.vue"],
        genComponentName: ({ dirname, originalName }) => `${dirname}-${originalName}`
      }]
    }),
  ],
});