Vue 命名规范指南
良好的命名规范可以提高代码的可读性和可维护性。以下是 Vue 项目中推荐的命名规范：
1. 组件命名
单文件组件 (SFC)
除index外，使用PascalBase风格
- PascalCase (大驼峰式)：
MyComponent.vue - 多单词命名：避免与 HTML 元素冲突，如
UserProfile.vue
基础组件 (展示型组件)
- 前缀
Base：BaseButton.vue,BaseIcon.vue
单例组件 (每个页面只使用一次)
- 前缀
The：TheHeader.vue,TheSidebar.vue
紧密耦合的组件
- 父组件名作为前缀：
TodoList.vue和TodoListItem.vue
2. Props 命名
- camelCase (小驼峰式)：
userName,initialValue - 避免使用 DOM 属性命名
3. 方法命名
- camelCase：
getUserInfo(),handleClick() - 常用前缀：
handle- 处理用户交互：handleSubmit()fetch- 获取数据：fetchUserData()show- 显示某些内容：showModal()toggle- 切换状态：toggleMenu()
4. 自定义事件命名
- kebab-case (短横线连接)：
user-updated,form-submitted - 建议使用动词或动词短语：
close-modal,upload-success
5. 指令命名
- 小写字母：
v-loading,v-focus - 自定义指令应使用
v-前缀
6. 变量命名
- camelCase：
userData,isLoading - 布尔值使用
is,has,can等前缀：isVisible,hasPermission
7. 常量命名
- 全大写 + 下划线：
MAX_COUNT,API_URL
8. 文件夹和文件命名
- kebab-case：
user-profile,api-service.js - 组件目录：
components/ - 页面目录：
views/或pages/
9. 其他约定
- 避免使用
$和_前缀，这些在 Vue 生态中有特殊含义 - 私有属性/方法可以使用
_前缀：_privateMethod()
遵循这些命名规范可以使你的 Vue 项目更加一致和易于维护。团队内部可以根据实际情况调整这些规范，但重要的是保持一致性。