这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助unplugin-generate-component-name

一款用于以文件夹名或者setup标签写入名字来自动生成Vue组件名的插件。

项目地址功能

  • 💚 支持 Vue 3 开箱即用。
  • ⚡️ 支持 Vite、Webpack、Rspack、Vue CLI、Rollup、esbuild 等，由unplugin提供支持。
  • 🪐 支持文件夹名称和Setup extend两种模式。
  • 🦾 完全支持 TypeScript。

安装

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

Vite 配置

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

Rollup 配置

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

Webpack 配置

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

使用方法(开箱即用)文件夹名称

  • 你可以使用index组件所在的文件夹名作为组件的名字。

自动生成 Vue 组件名称

在Vue中，我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称。这个插件使得在大型代码库中找到和管理组件更加容易和直观。例如，假设我们有一个Vue组件名为Index.vue，此组件在Home目录中。通过unplugin-generate-component-name插件，此组件会自动命名为Home。

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

Setup Extend

在标签中，我们设置了 name 属性为 “Home”。这显式地将组件命名为 “Home”，unplugin-generate-component-name插件会使用这个名字而不是 “Index”。

    // 你的脚本逻辑

选项

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 {    enter?: PattenOptions[];}

include

include选项能够明确说明哪些文件应被包含在组件名称的自动创建过程中。

exclude

exclude选项则用于指明哪些文件应排除在组件名称的自动创建过程之外。

enter

在Options接口中，有一个enter选项。enter是一个数组，该数组中每个对象都被视作一种特定的规则用于处理不同的文件路径。

每一种规则都可以包含include和exclude选项，用以指明哪些文件是应特别对待的。你也可以要求对genComponentName函数进行特定的设置，以达到自定义组件名称生成的效果。

下面是一个例子：

// vite.config.tsimport 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}`      }]    }),  ],});

在这个例子中，unplugin-generate-component-name插件被配置为处理所有的 .vue 文件。在enter选项中有两个对象适用于不同的文件路径：

  • 第一个对象覆盖所有以"index.vue"结尾的文件。genComponentName函数返回组件名称。如果script setup 标签中已经指定了名称，那么优先级将会很高; 如果没有，文件夹名称（dirname）就将会使用。
  • 第二个对象排除了所有以"index.vue"结尾的文件, 仅包括"src/components/"目录下的.vue文件。genComponentName函数用来以${dirname}-${originalName}的格式生成组件名。例如，对于一个名为src/component/Button中的MyButton.vue文件，它将会是Button-MyButton。

本文转载于:https://juejin.cn/post/7314301236098269236如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。