Vue streamlined style code sharing

The style guide on the Vue official website is classified according to priority (in order: necessary, strongly recommended, recommended, and used with caution), and the code intervals are large and difficult to query. This article is classified according to type and reduces some examples or explanations. It is a streamlined version of the Vue style guide. This article mainly introduces the relevant information of the Vue streamlined style guide, including component names, instructions and features. Friends in need can refer to it. Hope it helps everyone.

Component name

[Component name is multiple words] (required)

The component name should always be multiple words, except for the root component App. Doing so avoids conflicts with existing and future HTML elements, since all HTML element names are single-word names. , or always connected with a horizontal line (kebab-case)] (strongly recommended)

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

[The basic component name must start with a specific prefix] (strongly recommended)

Apply specific styles and conventions Base components (that is, presentational, non-logical, or stateless components) should all start with a specific prefix, such as Base, App, or V

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

[Components that should only have a single active instance should Named with the prefix The to show its uniqueness] (strongly recommended)

This does not mean that the component can only be used on a single page, but that each page can only be used once. These components will never accept any prop

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

[Subcomponents that are tightly coupled with the parent component should be named with the parent component name as a prefix] (strongly recommended)

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

[The component name should be described in a high-level (usually general) ) word and end with a descriptive modifier] (strongly recommended)

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

[The component name should always be PascalCase in single-file components and string templates - but always kebab-case in DOM templates ] (Strongly recommended)

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

[Component names should tend to be complete words rather than abbreviations] (Strongly recommended)

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

Component related

[Single file component, string Components with no content in templates and JSX should be self-closing - but don’t do this in DOM templates] (strongly recommended)

Self-closing components mean that they not only have no content, but also deliberately have no content

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

[Set scope for component styles] (required)

This rule is only relevant to single-file components. It is not necessary to use the scoped attribute. Scoping can also be set through CSS Modules, or using other libraries or conventions

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

[Single-file components should always keep the order of

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills