Vue自动生成组件的名字

unplugin-generate-component-name

一款用于自动生成Vue组件名称的插件。

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

安装

bash 复制代码
# Yarn
$ yarn add unplugin-generate-component-name -D

# pnpm
$ pnpm i unplugin-generate-component-name -D

Vite 配置

ts 复制代码
// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'

export default defineConfig({
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
})

Rollup 配置

ts 复制代码
// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'

export default {
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
}

Webpack 配置

ts 复制代码
// webpack.config.js
module.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

text 复制代码
src/home/
├── index.vue // 组件名称是 Home
├── about.vue
└── users/
    ├── index.vue // 组件名称是 Users
    └── info.vue

Setup Extend

<script setup> 标签中,我们设置了 name 属性为 "Home"。这显式地将组件命名为 "Home",unplugin-generate-component-name 插件会使用这个名字而不是 "Index"。

vue 复制代码
<template>
  <!-- 你的组件标记 -->
</template>

<script setup name="Home">
  // 你的脚本逻辑
</script>

<style>
  <!-- 你的组件样式 -->
</style>

选项

ts 复制代码
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[];
}

include

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

exclude

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

enter

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

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

下面是一个例子:

ts 复制代码
// 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}`
      }]
    }),
  ],
});

在这个例子中,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
相关推荐
弗锐土豆3 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku6 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
浅墨momo12 分钟前
搭建第一个Shopify App
前端·程序员
Codebee16 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C16 分钟前
常见web攻击类型
前端·http
jackyChan17 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang45317 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端
豆苗学前端21 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
光影少年23 分钟前
react16-react19都更新哪些内容?
前端·react.js