vue项目实战系列五：vue书写规范

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

Style Guide

This is the official style guide for Vue-specific code. If you use Vue in a project, it’s a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don’t believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values.

这里是官方的Vue特有代码的风格指南.如果在工程中使用Vue,为了回避错误、小纠结和反面模式,该指南是份不错的参考.不过,我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的.所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的.

For the most part, we also avoid suggestions about JavaScript or HTML in general. We don’t mind whether you use semicolons or trailing commas. We don’t mind whether your HTML uses single-quotes or double-quotes for attribute values. Some exceptions will exist however, where we’ve found that a particular pattern is helpful in the context of Vue.

对于其绝大部分,我们也总体上避免就JavaScript或HTML的本身提出建议.我们不介意你是否使用分号或结尾的逗号.我们不介意你在HTML attribute中使用单引号还是双引号.不过当我们发现在Vue的情景下有帮助的特定模式时,也会存在例外.

---

1. 组件命名规范:

(1). 两种:

①. 大驼峰:
    MyComponent.vue

②. 横线:
    my-component.vue

(2). 当注册组件或prop时命名风格:

①. kebab-case(短横线分隔命名):
    a. 最通用的使用约定

②. camelCase(驼峰式命名)

③. PascalCase(单词首字母大写命名):
    a. 最通用的声明约定

(3). 命名可遵循以下规则:

①. 有意义的名词、简短、具有可读性

②. 基础组件名以Base、App命名

③. 文件夹命名主要以功能模块代表命名

(4). Vue组件中的方法书写顺序:

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