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>
