Partage de code de style simplifié Vue

Le guide de style sur le site officiel de Vue est classé par priorité (nécessaire, fortement recommandé, recommandé et utilisé avec prudence), et les intervalles de code sont grands et difficiles à interroger. Cet article est classé par type et réduit quelques exemples ou explications.Il s'agit d'une version simplifiée du guide de style Vue.Cet article présente principalement les informations pertinentes du guide de style simplifié Vue, y compris les noms des composants, les instructions et les fonctionnalités. je peux m'y référer. J'espère que cela aidera tout le monde.

Nom du composant

[Le nom du composant doit être composé de plusieurs mots] (obligatoire)

Le nom du composant doit toujours être composé de plusieurs mots, à l'exception du composant racine App. Cela évite les conflits avec les éléments HTML existants et futurs, puisque tous les noms d'éléments HTML sont constitués d'un seul mot

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

[Les noms de fichiers de composants de fichiers uniques doivent toujours commencer par une lettre majuscule ( PascalCase) ou toujours connectés avec une ligne horizontale (kebab-case)] (fortement recommandé)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

[Le nom du composant de base doit commencer par un préfixe spécifique] (fortement recommandé)

Composants de base spécifiques à l'application de les styles et les conventions (c'est-à-dire les composants de présentation, non logiques ou sans état) doivent tous commencer par un préfixe spécifique, tel que Base, App ou V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

[ne devraient avoir que les composants d'une seule instance active doivent être nommés avec le préfixe The pour montrer leur unicité] (fortement recommandé)

Cela ne signifie pas que le composant ne peut être utilisé que sur une seule page, mais que chaque page ne peut être utilisée qu'une seule fois. N'acceptez jamais aucun accessoire

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

[Les sous-composants étroitement couplés au composant parent doivent être nommés avec le nom du composant parent comme préfixe] (fortement recommandé)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

[Le le nom du composant doit être préfixé par des mots de haut niveau (généralement décrits en général) commençant et se terminant par des modificateurs descriptifs] (fortement recommandé)

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

[Les noms de composants dans les composants à fichier unique et les modèles de chaîne doivent toujours être PascalCase ——Mais toujours kebab-case dans le modèle DOM] (fortement recommandé)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[Les noms des composants doivent avoir tendance à être des mots complets plutôt que des abréviations] (fortement recommandé)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Lié aux composants

[Les composants de fichier unique, les modèles de chaînes et les composants sans contenu dans JSX doivent se fermer automatiquement - mais ne le faites pas dans les modèles DOM] (fortement recommandé)

Auto -les composants de fermeture indiquent non seulement qu'ils n'ont pas de contenu, mais qu'ils n'ont intentionnellement aucun contenu

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[Définir la portée des styles de composants] (obligatoire)

Cette règle ne concerne que les fichiers uniques composants. Il n'est pas nécessaire d'utiliser l'attribut scoped. La portée peut également être effectuée via des modules CSS ou en utilisant d'autres bibliothèques ou conventions

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>

[Les composants à fichier unique doivent toujours avoir l'ordre des balises