Notes about Vue Style Guide

A. Necessary

1. Multiple-word for component’s name
2. Data for component must be a function
3. The definition of prop should be as detailed as possible (at least specified its type)
4. Always use key with v-for
5. Never use v-if & v-for to the same element (v-for has a higher priority than v-if when Vue deal with the directives)
6. Set the scope for the component style, but use class rather than scoped feature
7. Custom private attributes use the $_ prefix

B. Highlycommended

1. Separate each component into files
2. The filename of a single file component should always be either capitalized or always crosslinked
3. The underlying components for which a particular style and convention are applied (that is, components that show classes, Illogical or stateless) should all begin with a specific prefix
4. Components that are used only once per page should be named with “the” prefix
5. Child components that are tightly coupled with the parent component (that means a component only makes sense in the context of a parent component) should be prefixed with the parent component name.
6. Component names should begin with high-level (usually generic) words and end with descriptive modifiers.
7. In single file components, string templates and components with no content in JSX should be self-closed-but never do so in DOM templates.
8. For most projects, component names should always be PascalCase in single file components and string templates but always kebab-case in DOM templates
9. The components name should be PascalCase in JS/JSX, but for applications that define global components only through Vue.component, kebab-case is recommended as an alternative
10. Component names should tend to be full words instead of abbreviations
11. When declaring prop, it should always be named with camelCase. But in templates & JSX you should use kebab-case
12. Seprating multiple properties of an object by multiple rows that can improve the readability of the code
13. Component templates should contain only simple expressions, and complex expressions should be refactored into computed properties or methods
14. Divide complex computational attributes into as many simpler ones as possible
15. Non-empty HTML attribute values should always be quoted
16. Instruction abbreviation

C. Recommended

1. There should be a uniform order of options for components/instances (default order recommended: https://cn.vuejs.org/v2/style...)
2. The properties of elements (including components) should have a uniform order (default order recommended: https://cn.vuejs.org/v2/style...)
3. Adding blank lines between multiple attributes can improve readability when components begin to be dense or difficult to read
4. Single-file components should always keep the script template and style tags in the same order. And style should be at the end, because the other two tags must have at least one.

D. Be Attention (to use these as follow)

1. Use v-if/v-else-if/v-else without using key
2. Lots of element selectors appear in scoped
3. Hidden parent-child component communication (use this.$parent or modify prop)
4. Global State Management without Flux (manage global state by using this.$root or a global event bus)

All these referred to https://cn.vuejs.org/v2/style...