Because the team needs to, so a brief summary of Vue style front-end development specifications.

Code tens of millions of lines, the first line of security; Front end is not standard, colleagues two lines of tears.

Naming conventions

Project named

Use all lowercase letters and delimit by underscore.

Example: my_project_name

The directory name

Use the hump nomenclature.

Example: directoryName

Name of the component directory under components, using the big hump command.

Example: the TopBar

When there is a complex number structure, use the plural nomenclature.

Example: Components, directives, filters, mixins, utils, views, pages, scripts, styles, themes, images, Audios, videos

The file name

Use the hump nomenclature.

Example: the fileName

JS variable naming

  • Standard variables are named in camel shape

Example: pageNum, pageSize

  • Constants are all uppercase and underlined

For example, PI, COMMAND_STATUS, ORG_TYPE

  • Constructor, uppercase first

Ex. :

class Person {}
function Auth {}
Copy the code

The style name

  1. Both class and ID must be lowercase-separated
  2. Use English. Special characters are prohibited
  3. Naming needs to be semantic

Ex. :

Mod-box {} // module container. Btn-download {} // Download button. Top-bar {} // top menu barCopy the code

Picture naming

  1. The name is lowercase and is preceded by_separated
  2. Use abbreviations in English or pinyin. Special characters are prohibited
  3. The name should reflect the general purpose of the image

Ex. :

Bg.jpg // Background image icon_camera.png // camera imageCopy the code

Annotation specifications

Single-line comments

// is recommended

// Select openMap(); let max = Math.max(1, 2, 3); /* Upload attachment */uploadFile();Copy the code

Multiline comment

@param {String} curValue - Current value * @param {String} key - Attribute name in the data list * @param {String} value - Attribute values in the data list * @return {Any} returns matching values, Undefined */ matchValue(arr = [], curValue, key = "key", value = "value") { let result = arr.find(item => { return item[key] == curValue; }); return result ? result[value] : result; }Copy the code

HTML specification

General agreement

  • Nested nodes are indented by 2 characters

  • Attribute name lowercase

  • Attribute values are wrapped in double quotes

  • Label closing

  • <img>

    The Alt attribute of the tag is not empty

  • Minimize the number of labels

  • The label is too long to wrap

  • Do not use inline labels to wrap block-level or inline block labels

  • V-for and V-if are not used in the same label

Semantic tag

The right label does the right thing

Ex. :

<header></header> 
<footer></footer>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<mark></mark>
Copy the code

Custom Components

  • The component name is lowercase and marked with-separated
  • To set the property value to true, use a single property name

Ex. :

<service-plan editable></service-plan> 
Copy the code

Component/instance option order

<script> export default {name: 'ExampleName', // props Components: {}, // Component directives: {}, // mixins: [], // mix filters: {}, // Filter data () {// Data return {dataProps: "}}, computed: {}, // Calculate property watch: {}, // Create () {}, mounted () {}, activated () {}, // Create () {}, mounted () {}, activated () {}, Methods: {}, // component method definition} </script>Copy the code

The CSS specification

General agreement

  • Nested declarations are indent by 2 characters

  • Use abbreviated attributes whenever possible

  • Each attribute ends with a semicolon

  • Use class for static styles, avoid style

  • Minimize hierarchy

  • We don’t add units after 0

  • The id solution is not recommended

  • Avoid using *

Ex. :

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container header {
  margin: 0;
  padding: 10px 20px;
  border: 1px solid #e7e7e7;
  font: 100%/1.5 palatino, georgia, serif;
}
.container main {
  flex: 1;
}
Copy the code

Unified management of common styles

└─ Styles ├─ Base.scss ├─ reset. SCSS ├─ index.scssCopy the code

JavaScript code

General agreement

  • Indent 2 characters
  • The code ends with;The end of the
  • Use strict equality= = =

Ex. :

process.env.NODE_ENV === "production" ? "build" : "dev";
Copy the code
  • Setting default Parameters

Ex. :

matchValue(arr = [], curValue, key = "key", value = "value") {          
  let result = arr.find(item => {            
    return item[key] == curValue;          
  });          
  return result ? result[value] : result;        
}
Copy the code
  • Using the arrow function

Ex. :

arr.forEach(item => {})
Copy the code
  • String concatenation uses template strings

Ex. :

${year} year ${month} month ${date} day ${hours} when ${minutes} minutesCopy the code

Picture & font icon

The small diagram uses the font icon iconfont

Use high quality compression diagrams for large images

other

  • Remove unnecessary code from the project
  • Fault tolerance of data

Ex. :

this.detail = res || {};
<template v-if="detail.feedback && detail.feedback.files">
  <img 
    :src="item.url"     
    :alt="item.name"     
    v-for="(item, index) in detail.feedback.files"     
    :key="index"  
  />
</template>
Copy the code
  • Iterating data breaks out of the loop

Ex. :

arr.find(item => { return item.id === this.regionId; }); arr.some(item => { if (item.id === this.regionId) { return true; }}); for (let i = 0; i < 5; i++) { if (i === 3) break; }Copy the code