Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

It takes about 8 minutes to read this article.

preface

This naming style guide recommends a common naming convention for writing vue.js code. This gives the code the following properties:

  • Unified team naming conventions make it easier for other developers and team members to read and understand.

  • IDEs makes it easier to understand code, providing ancillary functions such as highlighting, formatting, and so on.

  • This guide is a personal summary for reference only.

Named classification

There are four commonly used vUE naming conventions:

  • camelCase

  • Kebab-case (short horizontal connection)

  • PascalCase

  • Snake (underlined connection)

Folder name

If you expand project dependencies in node_modules, you’ll see that almost all project folders are named kebab-case, and folders named kebab-case look cleaner than camelCase folders.

The subfolders under the Components folder also use the kebab-case style.

The component named

1. The custom component name must be a combination of multiple words and be a full word, not an abbreviation of the word.

/ / error components / | - sd - Settings. Vue | - u - he says - opts. Vue / / correct components / | - student - dashboard - Settings. Vue | - user-profile-options.vueCopy the code

2. The filename of a single-file component should always either begin with a uppercase word (PascalCase) or be a kebab-case.

➤ Here all use kebab-case format, mainly behind many will use kebab-case format, convenient memory.

Uppercase is the most friendly for code editor auto-completion, because it makes it as consistent as possible in the way we reference components in JS(X) and templates. However, mixing file naming can sometimes lead to problems with case-insensitive file systems, which is why horizontal join naming is also perfectly desirable.

3. Basic components that apply specific styles and conventions (that is, non-logical or stateless components that present classes) should all start with a specific prefix, such as Base, App, or V. And it’s generally in the global registry because it’s used a lot.

/ / error components / | - MyButton. Vue | - VueTable. Vue | - Icon. Vue / / components / | - BaseButton. Correct vue | - BaseTable. Vue | - BaseIcon.vueCopy the code

4. The order of words in component names

Component names should start with high-level (usually generically described) words and end with descriptive modifiers.

/ / error components / | - ClearSearchButton. Vue | - RunSearchButton. Vue | - SearchInput. Vue / / components / | - right SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vueCopy the code

5. Case of component names in JS

That is, when registering components, all use PascalCase format.

importMyComponent from './my-component.vue'

exportdefault{
  name: 'MyComponent'.components:{MyComponent}
}
Copy the code

6. Name components in the HTML template

For most projects, component names in single-file components and string templates should always be PascalCase — but always kebab-case in DOM templates.

That is, the PascalCase format is used for single-label writing in the template, and the Kebab-case format is used for double-label writing.

➤ Use kebab-case for all tags, whether single or double tags, mainly for convenience.

<! <my-component/> <my-component></my-component>Copy the code

7. Case of prop name

The prop passed in the sub-component HTML is in kebab-case format, and the sub-component receiver is in camelCase format.

// error <welcome-message greetingText="hi"/> props: {'greeting-text': <welcome-message greeting-text="hi"/> props: {greetingText: String}Copy the code

Component event naming

Always use kebab-case and end with a verb.

/ / this. Correct $emit (' dom - resize); this.$emit('api-load');Copy the code

After summarizing

1, using kebab-case named:

  • folder

  • Single file component

  • Components used in HTML templates (
    )

  • < my-Componnetset-text =”hello”/> Prop passes properties to child components in templates (< my-Componnetset-text =”hello”/>)

  • All event names (this.$emit(‘api-reload’))

2. PascalCase naming:

  • Common Base Components (MfcSelect)

  • ImportMyComponentfrom ‘./my-component.vue’

  • Component name property (name:’MyComponent’)

3. CamelCase naming:

  • Child components receive prop properties
props: {
    setText: String
}
Copy the code

Q&A

Q: Why is kebab-case selected for some names that seem to allow both PascalCase and kebab-case?

A: Because if A lot of kebab-cases are used at the same time, it’s easier to remember, that’s all.

Refer to the link

Style Guide (official) : cn.vuejs.org/v2/style-gu…

Vue. Js component coding standards (in Chinese) : pablohpsilva. Making. IO/vuejs – compo…

Recently updated articles:

  • JS static type detection, there is an internal smell
  • 3 minutes to finish image lazy loading
  • Let’s talk about Web Notification desktop notifications in HTML5

For more exciting content, follow me to get more front-end technology and personal growth related content, I believe interesting people will meet eventually! Original is not easy, if you feel helpful, also welcome to like, share, add collection!