记录--Vue自动生成组件名
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
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.ts import GenerateComponentName from 'unplugin-generate-component-name/vite' export default defineConfig({ plugins: [ GenerateComponentName({ /* options */ }), ], })
Rollup 配置
// rollup.config.js import GenerateComponentName from 'unplugin-generate-component-name/rollup' export default { plugins: [ GenerateComponentName({ /* options */ }), ], }
Webpack 配置
// 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
。
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"。
<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[]; }
include
include
选项能够明确说明哪些文件应被包含在组件名称的自动创建过程中。
exclude
exclude
选项则用于指明哪些文件应排除在组件名称的自动创建过程之外。
enter
在 Options
接口中,有一个 enter
选项。enter
是一个数组,该数组中每个对象都被视作一种特定的规则用于处理不同的文件路径。
每一种规则都可以包含 include
和 exclude
选项,用以指明哪些文件是应特别对待的。你也可以要求对 genComponentName
函数进行特定的设置,以达到自定义组件名称生成的效果。
下面是一个例子:
// 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
。