Use the parent directory name as the component name

[yuri-li]

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]
    }
}

[baiwusanyu-c]

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

[sxzz]

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

[baiwusanyu-c]

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

I get it 😄

[yuri-li]

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

[LinusBorg]

So this should be moved to the devtools repo?

[yuri-li]

So this should be moved to the devtools repo?

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

[sxzz]

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

You can define the name manually as a temp solution.

[edison1105]

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.

[yuri-li]

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

[yuri-li]

<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>

[yuri-li]

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 提供的方法最简便。当然，只是临时的解决方案

[yuri-li]

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

[yuri-li]

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

[tjx666]

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

[sxzz]

@tjx666 Use defineOptions macros and set the name property.