IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chore: update Vue styleguide

Browse Source
This commit is contained in:
Raphael Beer 2020-03-14 01:02:12 +01:00
parent 7df4432601
commit c2e8ea0634
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/vue.md
View File

@ -3,6 +3,7 @@
## We use single-file components ## We use single-file components
Each component lives in a single file, containing: Each component lives in a single file, containing:
- its `template` (the DOM structure) - its `template` (the DOM structure)
- its `script` (including `props`, `data` and `methods` among other things) - its `script` (including `props`, `data` and `methods` among other things)
- its `style` (defining the look of the component) - its `style` (defining the look of the component)
@ -10,6 +11,7 @@ Each component lives in a single file, containing:
See the [Vue.js docs](https://vuejs.org/v2/guide/single-file-components.html) for more details. See the [Vue.js docs](https://vuejs.org/v2/guide/single-file-components.html) for more details.
Placed in the same folder are also: Placed in the same folder are also:
- the test file (e.g. `MyComponent.spec.js`) - the test file (e.g. `MyComponent.spec.js`)
- the storybook file (e.g. `MyComponent.story.js`) - the storybook file (e.g. `MyComponent.story.js`)
@ -20,6 +22,7 @@ Vue.js allows us to define component props either as strings or as objects (with
Also: only (and always!) define a `default` for props that are _not required_. Also: only (and always!) define a `default` for props that are _not required_.
Why? Why?
- it makes our code more robust – a warning will be shown when passing a wrong prop type - it makes our code more robust – a warning will be shown when passing a wrong prop type
- it clearly defines the component API and tells other developers how to use it - it clearly defines the component API and tells other developers how to use it
@ -43,11 +46,14 @@ For more complex use cases see the [official Vue.js documentation](https://vuejs
## We use shorthands ## We use shorthands
For better readability we prefer For better readability we prefer
- `:something` over `v-bind:something` - `:something` over `v-bind:something`
- `@click` over `v-on:click` - `@click` over `v-on:click`
- `#slotSame` over `v-slot:slotName`
- `#default` over `v-slot`
Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands) Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands) (for [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand))
## Recommended reads ## Recommended reads
The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components. The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.