Vue code specification Script

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Code is written for people to see, incidentally to the machine to run!

preface

Own front end staff in company due to the project team is less, has been have no a specification to a unified code, which resulted in increased amount of program code, become very difficult to maintain, in view of the project before some of experience and develop their own habits, summarizes some of the code below specification, also not too full, will be added in a timely manner. Maybe my specification is not suitable for you, but I hope you can read it and get rid of its essence to form your own good code style. I hope those of you who like me don’t come across shishan like code that needs to be maintained.

This article starts with the Script section in vue, followed by the Template section and the Style section.

The body of the

• The import path must start from @. If the import path is defined in vue.config.js, the import path must be used preferentially

  // Configure the alias chainWebpack in vue.config.js: (config) = > {/ / add alias config. Resolve. Alias. Set (' @ ', resolve (' SRC ')). The set (' @ ', resolve (' SRC/assets), set (' @ 'c, resolve('src/components')) .set('@h', resolve('src/https')) .set('@p', resolve('src/plugins')) .set('@l', resolve('src/layout')) .set('@r', resolve('src/router')) .set('@s', resolve('src/store')) .set('@sty', resolve('src/styles')) .set('@u', resolve('src/utils')) .set('@ven', resolve('src/vendor')) .set('@v', Resolve (' SRC/views)) config. Optimization. RuntimeChunk (' single ')}, / / when introducing component should use alias, Import MHeader from '@L /header' import SideBar from' @L/SideBar 'Copy the code

• Attributes in the export Default object need to be written in the following order, except for those that are not needed (name is not included).

  name, component, props, data, methods, computed, watch, mounted

  <script>
  export default {
    name: '',
    components: {
  
    },
    props: {
  
    },
    data () {
  
    },
    methods: {
      init () {
        
      }
    },
    computed: {
  
    },
    watch: {
  
    },
    mounted () {
      this.init()
    }
  }
  </script>
  Copy the code

• Name is generally the same as single-file components using the Paca/camel PascaCase spelling

  name: 'BaseEcharts'.Copy the code

• A component in components has an exclusive row

  components: {
    MHeader,
    SideBar
  },
  Copy the code

• Props must have strict type constraints

  props: {
    id: { type: String.required: true },
    width: { type: String.default: '500px' },
    height: { type: String.default: '500px' },
    opt: { type: Object.required: true}},Copy the code

• Props should use cameCase when declared, and kebab-case should be used in the template

  props: {
    greetingText: String
  }
  <WelcomeMessage greeting-text="hi"/>
  Copy the code

• Data must be a function

  data () {
    return {
      mergeListLegacy: [],
      fieldListLegacy: [],
      tableDataLegacy: []
    }
  },
  Copy the code

• Mounted instead of created, init is the last function in the methods object

  mounted () {
    this.init()
  }
  Copy the code

• Use let/const instead of var

  const fieldname = column.property
  Copy the code

• Use single quotes, not double quotes

  if (typeof row[fieldname + 'rowspan'= = ='undefined') {
    return { rowspan: 1.colspan: 1}}Copy the code

• The arrow function does not use parentheses for single arguments, but for other arguments

  // Single parameter
  this.tableData.map(item= > {
  	// ...        
  })
  
  // Multiple parameters
  this.tableData.map((item, index) = > {
  	// ...        
  })
  Copy the code

• Do not end a sentence with a semicolon

  init () {
    this.mergeListLegacy = data.tableData.mergeList
    this.fieldListLegacy = data.tableData.fieldList
    this.tableDataLegacy = this.parseTable(data.tableData.list)
  }
  Copy the code

• The calling interface in the function uses async await and uses object deconstruction to get the data returned from the back end

  async uploadFile(fData) {
    const { code, message } = await uploadFile(fData)
  }
  Copy the code

• The interface requests to determine the unique identifier before obtaining the data

  if (code === 200) {
    this.mapData = data
    this.mapData.value = this.OPTIONS[0].value
  }
  Copy the code

• Spaces are required in the following cases:

  • The key value in the: object must be followed by a space

  • Spaces must precede () after function names

  • In a ternary expression? : Must be preceded and followed by Spaces

  • All binary operators (= = = =, | |, &&, | | and | |, etc.) must have a space before and after

  • When braces are not wrapped, there must be Spaces at the beginning {after} and before the end} of the braces

  • When multiple variables/arguments are on a line, the variable must be followed by a comma followed by a space

  data () {
    return {
      mergeListLegacy: [].fieldListLegacy: [].tableDataLegacy: []}}const { code, message, data } = await getSelfServiceWorkbench(this.form)
  
  console.log(num, value)
  
  para.pageSize = isDownload ? 0 : this.pagination.pageSize 
  Copy the code

• Can use ES6 ‘instead of concatenated string, intermediate variable ${XXX}

  ${XXX} : XXX can be a variable, or it can be a ternary operation

  Toast.fail(`The ${this.label}Or handling comments cannot be empty ')
  Copy the code

• Clear the console that is useless

Reference:

Vue official website style guide