What problem does this feature solve?

componentName("/order/Index.vue")="Order"

What does the proposed API look like?

1. 检查所有用到正则/([^/\\]+)\.\w+$/的代码
2. （正确）获取componentName的部分代码

const match = Component.__file.match(/([/\\](\w+))?([/\\](\w+))\.\w+$/)
if (match) {
    if (capitalize(match[4]) === "Index") {
        const dirName = match[2]
        name = capitalize(dirName)
    } else {
        name = match[4]
    }
}

What problem can this feature solve？As far as I know, now with unplugin-vue-components and unplugin-auto-import you don't even need to import components manually

@baiwusanyu-c It will resolve the path /order/Index.vue and get the component name with order, instead of Index

It will resolve the path /order/Index.vue and get the component name with order, instead of Index

I get it 😄

我没有使用unplugin-auto-import。自动引入，不是讨论的关键点。换个开发工具，比如，intellij idea或webstorm，都是自动引入的（可能需要按快捷键，习惯了，没注意），不需要插件。而且，可以看到import的部分，对写代码是有帮助的，如果遇到问题，方便定位。隐藏一些开发的细节，没有意义。 复杂的组件，使用directory name作为组件名称，更舒服些，你觉得呢？如果所有组件都叫“Index”，或者，加上namespace才能区分，显然有点麻烦了。 抱歉，我是后端开发，不是很熟悉前端的工程结构，也不知道怎么构建"vuejs/core"的源码。小学徒一枚，一起探讨下

So this should be moved to the devtools repo?

So this should be moved to the devtools repo?

跟开发工具没有关系吧。我提的问题是“组件如何命名”。 示例1: "/pages/order/Index.vue"，组件名称应为“Order”。 示例2: "/pages/order/item/Index.vue"，组件名称应为"Item"。如果是“OrderItem”就更好了

<script>
export default {
  name: 'CustomName'
}
</script>

You can define the name manually as a temp solution.

Use the solution given by @sxzz. You can also refer to the naming of components inside the style guide BTW, I personally never use Index.vue as a component name, I am used to giving a meaningful name to the component according to the business, and it will be very convenient when searching.

So this should be moved to the devtools repo?

Do you want to move the question to "vue devtools repo"? Sorry, I made a mistake. I thought you were going to throw the problem to vscode, chrome plugins, webstorm, Intellij idea and other tools

<script>
export default {
  name: 'CustomName'
}
</script>

You can define the name manually as a temp solution.

多谢。你的方法是有效的。

<script lang="ts">
export default {
  name: "MultiplicationTable"
}
</script>
<script setup lang="ts">
import Item from "@/components/multiplicationTable/Item.vue"
import _ from "lodash"

const range = _.range(2, 10)
</script>

Use the solution given by @sxzz. You can also refer to the naming of components inside the style guide BTW, I personally never use Index.vue as a component name, I am used to giving a meaningful name to the component according to the business, and it will be very convenient when searching.

使用官网的例子，做个比对。我觉得第"2"种风格更适合组织代码。我也知道，typescript语言没有类似java package的概念，只能使用modules或namespace实现，或者，使用比较复杂的方式修改component name。目前看，@sxzz 提供的方法最简便。当然，只是临时的解决方案

@sxzz 多谢，查看了你的github，找到了解决方案 unplugin-vue-macros 我还是坚持自己的想法，对于组件名称，或目录结构，vue现在的约定不好，要改进

https://github.com/antfu/unplugin-vue-components 也可以解决问题

@sxzz 我看 elk 也是一堆 index.vue，你们平时不用 vue-devtools 吗？我没跑过 elk，不知道它有没有解决这个问题 我所在的项目，因为这个问题不允许组件文件名为 index.vue，因为 vue devtools 可读性不好。 我准备写一个 eslint 插件禁止团队成员这么做了。

@tjx666 Use defineOptions macros and set the name property.