vue组件命名规范

作者：亡梦发布日期:2026-04-09 浏览:57

<!-- MyComponent.vue -->
<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent', // PascalCase 命名法
  props: {
    // 属性定义
  },
  data() {
    return {
      // 数据定义
    };
  },
};
</script>

<style scoped>
/* 样式定义 */
</style>

解释说明

PascalCase 命名法:
- Vue 组件的命名通常使用 PascalCase（即每个单词的首字母大写）。
- 例如：MyComponent、UserProfile、ProductList 等。
组件名称一致性:
- 文件名与组件名称保持一致，例如组件名为 MyComponent，文件名应为 MyComponent.vue。
- 这样可以确保代码的一致性和可读性。
单文件组件 (SFC):
- 使用 .vue 文件格式来定义单文件组件，包含模板 (<template>), 脚本 (<script>) 和样式 (<style>) 部分。
避免使用保留字:
- 不要使用 HTML 元素名称作为组件名称，例如 div、span 等，以避免冲突。
有意义的命名:
- 组件名称应当具有描述性，能够清晰表达其功能或用途。

上一篇：vue2 .sync

下一篇：vue list添加元素