uniapp 组件命名

uniapp 组件命名规范

在 uniapp 中，组件命名需要遵循一定的规范以确保代码的可读性和一致性。以下是常见的命名规则和建议：

小写字母 + 连字符（kebab-case）
组件文件名和标签名应使用小写字母，并用连字符连接多个单词。例如：my-component.vue，在模板中使用时写作 <my-component>。

避免与原生 HTML 标签冲突
自定义组件名不应与 HTML 原生标签（如 div、span）或 Vue 保留标签（如 component、transition）重复。

语义化命名
组件名应清晰表达其功能或用途。例如：user-avatar、search-input、nav-bar。

全局组件与局部组件命名

全局组件
通过 Vue.component() 注册的全局组件通常使用更通用的命名，避免与业务强绑定。例如：base-button、app-header。

局部组件
局部组件（在单文件组件内注册）可以结合业务场景命名。例如：order-list-item、product-detail-card。

目录结构与组件命名

组件文件存放位置
建议将组件文件放在 /components 目录下，并按功能或模块分类。例如：

/components
  /common
    base-button.vue
  /user
    user-profile.vue

子组件命名
若组件是某个父组件的专用子组件，可以在命名中体现层级关系。例如：
父组件为 user-list.vue，子组件可命名为 user-list-item.vue。

命名冲突处理

避免重复命名
在大型项目中，可以通过添加模块前缀防止冲突。例如：admin-user-table、client-user-table。

动态组件命名
动态加载组件时，需确保名称唯一性。可通过变量拼接或唯一标识符实现。

示例代码

以下是一个符合规范的组件文件示例（/components/base-button.vue）：

<template>
  <button class="base-button" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

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

在模板中使用时：

<template>
  <base-button @click="handleClick">Submit</base-button>
</template>