Summary of front-end specifications (Ali Version)

HTML

  • Specifies the character encoding meta Charset
  • IE compatible mode Content =”IE=Edge”
  • Doctype capitalized
  • Reduce divs and use header, footer and other semantic tags
  • Attributes use double quotes

CSS

  • The lower case category is marked fw-test-0010
  • Subclass selectors are not used. Xx selectors use > selectors
  • Use abbreviated attributes
  • Attribute occupies a single line
  • Omit the unit after 0
  • Reduce use of ID selectors

LESS

  • Public files are placed in style/less/common
  • Code order @import references @variable declaration. page style description
  • Reduce the level of nesting (<20 lines)

JavaScript

  • Humps cannot be named with underscores
  • This rule applies to variables, functions, member variables, and local variables
  • Constants are named in all uppercase, spacing is underlined, and meaning expression is complete without abbreviations

Code format

  • TAB indents two Spaces by default
  • String quotes use single quotes
  • Object declarations use literals code a = [] Not a = new Object()
  • Use ES6+ syntax
  • Keywords if… Curly braces must follow
  • Undefined can never be a judgment
  • Loop judgment cannot exceed three levels
  • Context this can only use self
  • Careful use of console.log can cause performance problems

Vue specification

  • Component names are multiword
  • Component files are explicitly in pascal-case format
  • Base component file names start with base
  • Child components that are tightly coupled to the parent component should be named prefixed with the parent component name
  • Data must be a function
  • Prop definitions must be humped, typed, commented, required or defalut, and validator validation must be added
  • Component styles must use scoped
  • More features must be wrapped
  • Component templates must use simple expressions (less computed code embedded in template elements and more computed attributes computed)
  • Instructions are in abbreviated format
  • Keep the label sequence the same
  • The key must be set for v-for
  • V-show (high frequency switch display) and V-IF (low frequency switch display) options
  • Script sequence (name > Components > mixins > props > data > computed > watch > filter > hook functions > methods)

Vue Router specification

  • The Vuex is not used for route transmission
  • Using lazy loading
  • Kebab-case is used for router path and childrenPoints, and component naming rules are used for name
  • Path must start with a slash

Vue project structure specification

  • The project structure name must be consistent with the backend
  • Use vuE-CLI as scaffolding
  • File structure rules
SRC source directory | | | - aassets static resources - API API interface - components common components | | | - constants constant information - config configuration information - directives | - custom instructions Filters filter, Global tools | - datas simulated data temporary file | - lib external references plug-ins and modify the file temporary file | | - mock simulation interface - plugins plugin the global routing unified management | | - the router - store Vuex unified management | | - themes custom theme files - views views directory | - | - role role module name | - | - role - the list role list page | - | - role - the add role | - | - a new page Role - update role updates page | - | - index. Less role module style | | - components role module common component folder | - the employee the employee moduleCopy the code

API directory

  • Files and variables must be consistent with the back-end interface
  • One controller corresponds to one API file
  • The API method name must be consistent with the backend API URL
  • The API adds comments for each method consistent with the backend Swagger document

Assets directory

  • It mainly places images, styles, ICONS, etc., with the naming convention kebab-case

Components directory

  • Directories and files are named kebab-case

Constants directory

  • Store all constants in vUE. Install vuE-enum plug-in (enumeration plug-in)

Router and Store directories

  • Router and Store must be split
  • The router structure is consistent according to views
  • Store splits JS by business

Views directory

  • The name is the same as the backend
  • Components are named using PascalCase rules

annotated

  • Common component description, API interface, store (state, mutation, action), vue template, methods, data unusual words must be commented

other

  • Do not manually manipulate the DOM
  • Remove useless code console.log, etc