# 正确 ✅
UserProfileCard.vue
OrderHistoryList.vue

# 错误 ❌
userProfileCard.vue  # 小写开头
order_history_list.vue # 蛇形命名

# 明确职责 ✅
ProductImageGallery.vue

# 模糊抽象 ❌
ImageBox.vue

DashboardView.vue   # 路由级视图
LoginForm.vue      # 表单组件
UserCard.vue       # 展示型卡片

// 正确 ✅
import UserProfile from './UserProfileCard.vue'
export default {
  components: {
    UserProfileCard: UserProfile
  }
}

// 错误做法 ❌
components: {
  Profile: UserProfile // 别名导致混淆
}

// src/components/base/BaseButton.vue
app.component('BaseButton', BaseButton)

// 使用清晰明了
<BaseButton>提交</BaseButton>

TheHeader.vue     # 全站唯一头部
TheSidebar.vue    # 全站唯一侧边栏

# 父组件
UserAccount.vue

# 子组件
UserAccountProfile.vue
UserAccountSettings.vue

ActiveUserList.vue  # 强调"活跃的"
PrimaryButton.vue   # 强调"主要的"
DisabledInput.vue   # 强调"禁用的"

<!-- 错误：与原生button冲突 -->
<button>普通按钮</button>
<Button>组件按钮</Button> <!-- 视觉混淆！ -->

<!-- 正确：添加前缀区分 -->
<BaseButton>组件按钮</BaseButton>

# 模糊简写 ❌
Cmt.vue     # 评论？提交？
PMCard.vue  # 产品经理？项目管理？

# 语义明确 ✅
CommentItem.vue
ProjectManagerCard.vue

// 文件命名
userprofile.vue    // 全小写

// 注册使用
import UserProfile from './userprofile.vue' // 导入小写，使用大写

// .eslintrc.js
module.exports = {
  rules: {
    'vue/component-name-in-template-casing': ['error', 'PascalCase', {
      ignores: ['/router-link', '/router-view'] // 排除特定组件
    }]
  }
}

// scripts/validate-filenames.js
const fs = require('fs');
const path = require('path');

const componentsDir = path.resolve(__dirname, '../src/components');

fs.readdirSync(componentsDir).forEach(file => {
  if (!/^[A-Z][a-zA-Z]+\.vue$/.test(file)) {
    throw new Error(`Invalid component name: ${file}. Use PascalCase!`);
  }
});

// 添加项目前缀避免冲突
app.component('ShopCartButton', () => import('cart/Button'))
app.component('BlogCommentButton', () => import('blog/Button'))

<script setup>
// 文件名：UseUserData.js
// 命名规范延伸至Composable
const user = useUserData()
</script>