検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Vue の合理化されたスタイルのコード共有

Vue の合理化されたスタイルのコード共有

小云云
小云云オリジナル
2018-01-31 11:24:351670ブラウズ

Vue公式サイトのスタイルガイドは優先度（必須、強く推奨、推奨、使用注意）で分類されており、コード間隔が広くて検索しにくいです。この記事は、タイプごとに分類され、いくつかの例や説明が簡素化された Vue スタイル ガイドです。この記事では、コンポーネント名、手順、機能など、Vue の合理化されたスタイル ガイドの関連情報を主に紹介します。皆さんの参考になれば幸いです。

コンポーネント名

[コンポーネント名は複数の単語である必要があります] (必須)

コンポーネント名は、ルートコンポーネントのアプリを除き、常に複数の単語である必要があります。 これを行うと、すべての HTML 要素名が単一の単語であるため、既存および将来の HTML 要素との競合が回避されます

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

[単一ファイルのコンポーネントのファイル名は、常に大文字で始まるか (PascalCase)、常に水平方向の行接続 (kebab-) にする必要があります。 case)] (強く推奨) 

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

[基本コンポーネント名は特定のプレフィックスで始まる必要があります] (強く推奨)

特定のスタイルと規則を適用する基本コンポーネント (つまり、ロジックやステートレス コンポーネントを持たない表示クラス) は、すべてBase、App、V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
などの特定の接頭辞で始めます

[アクティブなインスタンスが 1 つだけあるコンポーネントには、その一意性を示す接頭辞を付けて名前を付ける必要があります] (強く推奨)

これは、コンポーネントがは 1 つのページでのみ使用できますが、各ページで 1 回のみ使用できます。これらのコンポーネントは props を決して受け入れません

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

[親コンポーネントと密結合しているサブコンポーネントには、親コンポーネント名を付けて名前を付ける必要があります。プレフィックス] (強く推奨)

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

[コンポーネント名は高レベル (通常は一般的な説明) の単語で始まり、説明的な修飾子で終わる必要があります] (強く推奨)

//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

[単一ファイル コンポーネントおよび文字列テンプレートのコンポーネント名前は常に PascalCase である必要がありますが、DOM テンプレートでは常に kebab-case を使用してください](強く推奨)

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

【コンポーネント名は略語ではなく完全な単語にする傾向があります】(強く推奨)

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

コンポーネント関連

【 単一ファイルJSX 内のコンテンツのないコンポーネント、文字列テンプレート、およびコンポーネントは自己終了である必要がありますが、DOM テンプレートではこれを行わないでください] (強く推奨)

自己終了コンポーネントとは、コンテンツがないだけでなく、意図的にコンテンツを持たないことを意味します。 content

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

[コンポーネント スタイルのスコープを設定する] (必須)

このルールは、単一ファイル コンポーネントにのみ関連します。 スコープ付き属性を使用する必要はありません。スコープの設定は、CSS モジュールを使用するか、他のライブラリや規約を使用して行うこともできます

//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>

[単一ファイル コンポーネントでは、