How to implement a streamlined style in Vue (detailed tutorial)-JS Tutorial-php.cn

This article explains the relevant knowledge points of the Vue streamlined style and shares the example code. Interested friends can refer to it.

The previous words

The style guide on the Vue official website is classified according to priority (in order of necessary, strongly recommended, recommended, and used with caution), and the code intervals are large and difficult to query. This article is classified by type and reduces some examples or explanations. It is a streamlined version of the Vue style guide

Component name

[Component name is multiple words] (required)

Component names 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(&#39;todo&#39;, {})
//good
Vue.component(&#39;todo-item&#39;, {})

Copy after login

[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

Copy after login

[Components that should only have a single active instance should Name it 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

each page Only 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
Copy after login
[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

Copy after login

[Component name It should start with a high-level (usually general description) word and end with a descriptive modifier] (strongly recommended)

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

Copy after login

[The component name in single-file components and string templates should always be PascalCase ——But always kebab-case in DOM template] (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

Copy after login

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

Copy after login

Component related

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

Self-closing components mean that they are not only No content, and deliberately no content

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

Copy after login

[Set scope for component styles] (required)

This rule is only relevant for single-file components.

It is not necessary to use the scoped feature. Scoping can also be set through CSS Modules, or using other libraries or conventions

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">//bad
&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;
&lt;MyComponent&gt;&lt;/MyComponent&gt;
&lt;!-- 在 DOM 模板中 --&gt;
&lt;my-component/&gt;
//good
&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;
&lt;MyComponent/&gt;
&lt;!-- 在 DOM 模板中 --&gt;
&lt;my-component&gt;&lt;/my-component&gt;</pre><div class="contentsignin">Copy after login</div></div>

[Single-file components should always keep the order of