vue组件命名规范以及组件方法书写顺序推荐

dreamStart_Lin

于 2019-11-21 10:48:36 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue web前端文章标签： vue vue组件规范

本文链接：https://blog.youkuaiyun.com/dreamStart_Lin/article/details/103178142

web前端同时被 2 个专栏收录

23 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文详细介绍了Vue组件的命名规范，包括单文件组件的命名风格，以及基础组件的命名约定。同时，提供了推荐的组件书写顺序，帮助开发者提高代码的一致性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue组件命名规范

1.单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)

因为单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

2.应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

如

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

https://cn.vuejs.org/v2/style-guide/

vue组件书写顺序推荐

    - components   
    - props    
    - data     
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods   
    - filter
    - computed
    - watch