一个可以自动重命名index.vue的vite插件,自动给index.vue组件重命名为文件夹的名称,也可手动使用name属性来命名组件。
// use npm
npm i vite-plugin-components-plus -D
// use yarn
yarn add vite-plugin-components-plus -D
// use pnpm
pnpm i vite-plugin-components-plus -D
然后在vite.config.js中使用
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { componentsRename } from 'vite-plugin-components-plus';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// 参数请看最后的说明
componentsRename(),
vue()
],
});
⚠️ 注意:本插件的调用,一定要在vue插件之前
配置完成后,你的index.vue文件就会使用文件夹名来命名了,比如你的文件夹名为test
,那么你的index.vue文件就会被重命名为Test.vue
,在devtools开发者工具中,你的组件名也会变成Test
,而不是index
了。
在 vue 文件中,setup 中也可使用 name属性 来为组件命名。该用法的优先级会小于default导出对象中的name属性
<script lang="ts" setup name="MyComponent">
// 在测试时,setup的内容不能为空,否则vue不会解析setup
import { defineProps } from 'vue';
</script>
ℹ️ 如果你在默认导出对象中显示的指定了组件名称,那么插件将不会对组件名称进行重命名。
如果你没有script标签,那么插件将会创建一个script标签,并且将组件名称写入到script标签中,如果你已经有了script标签,那么插件将会在script标签中添加一个name属性,如果你已经有了name属性,那么插件将不会对组件名称进行重命名。
对于大部分组件来说,就是插入了一段如下的代码
<script lang='${lang}'>
export default { name : '${componentName}'}
</script>
在使用插件时,你可以传入一个对象来配置插件的行为,对象的属性如下
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
include | string[] | ['index.vue','Index.vue'] | 需要重命名的文件 |
prefix | string | '' | 重命名的文件是加上的前缀 |
suffix | string | '' | 重命名的文件是加上的后缀 |