(1) Preface and introduction

No rules, no standards, for the team, a complete set of development specifications can reduce team collaboration costs and maintenance costs, making code easier to read.

(2) Environment construction

2.1 Installation Dependencies

Any dependencies needed in the project are presented in package.json files.

To install dependencies, use the NPM command. For details, see the NPM official documentation.

2.1.1 Production Environment Dependency

The dependencies required by the production environment are installed under the property Dependencies.

You can use the command:

npm install xxxx --save 
Copy the code

Do not install dependencies that are not needed in production environments.

2.1.2 Development environment dependency

The dependencies required by the development environment are installed under the property devDependencies.

You can use the command:

npm install xxxx --save-dev 
Copy the code

2.2 webpack configuration

2.2.1 Running Port

The operating ports in the project development environment are:

port: 8082
Copy the code

2.2.2 agent

If you need to use other system requests in your project that involve cross-domain issues, modify the broker configuration as follows.

proxy: {
      '/api': {
        target: 'http://xxxx'.pathRewrite: {'^/api' : ' '},// Whether to override
        changeOrigin: true.// Target is a domain name.
        secure: false.// Set a proxy that supports HTTPS}},Copy the code

(iii) Project specifications

3.1 Technical composition of the Project

This project is built by vue.js technical framework and packaged with Webpack.

// Technical version
vue:4.12.
webpack:4.0. 0
Copy the code

Vue. Js official document learning and use.

Learn and use webpack official documents.

3.2 Project structure specification

3.2.1 Core idea of the project structure

The relevant codes of business function modules are centralized in one piece, which is easy to move and delete
Separation of concerns, easy to develop, debug, maintain, write, review, understand code

3.2.2 Project Directory

. ├ ─ ─ vue. Config. Js /# webpack configuration file;├ ─ ─ the config /Common configuration options associated with project builds;│ ├ ─ ─ index. JsMaster configuration file│ ├ ─ ─ dev. Env. Js# Development environment variables│ ├ ─ ─ the prod. Env. Js# Production environment variables│ └ ─ ─ test. The env. Js# Test environment variables│ ├─ SRC / │ ├─ main.js# webpack entry file;│ ├ ─ ─ assets /# Shared resources other than code, such as pictures, ICONS, videos, etc.│ ├ ─ ─ API /Network module, such as interface;│ ├ ─ ─ the router /# Routing module│ ├ ─ ─ I18n /# Internationalization module│ ├ ─ ─ pages /# Single page page│ ├ ─ ─ vuex /Component sharing status│ ├ ─ ─ the components /# shared components; The components stored here should all be presentation components│ │ ├ ─ ─ base /# Basic components, such as: common popover components, loading components, prompt components.│ │ ├ ─ ─ common /Common global components, encapsulated navigation bars, bottom components, etc│ │ ├ ─ ─ temp /The same page is packaged as a component.│ │ ├ ─ ─ UItemp /UI components, such as project-specific buttons, message numbers, etc., can be packaged as components.│ ├ ─ ─ common /Common resources, such as: common images, ICONS, common components, modules, styles, constant files, etc.│ │ ├ ─ ─ compatible /Compatible modules, such as modules suitable for various interfaces of App and wechat;│ │ ├ ─ ─ the extension /Extension module for existing classes, e.g., Array extension module;│ │ ├ ─ ─ libraries /# store your own encapsulated or referenced libraries;│ │ ├ ─ ─ the tools /# Self encapsulated some tools│ │ ├ ─ ─ constant. Js# store js constants;│ │ ├ ─ ─ constant. SCSS# store SCSS constant;│ │ └ ─ ─... │ └ ─ ─ app /# Store project business code;│ ├ ─ ─ App. Vue# root component of app;├ ─ ─ public /The files in this directory will not be processed by Webpack. The directory will be copied to the output directory.├ ─ ─ babelrcBabel configuration file├ ─ ─ editorconfigEditor configuration file; Can be configured such as indent, space, TAB similar parameters;├ ─ ─. Eslintrc. JsConfiguration file for # esLint├ ─ ─ eslintignore# esLint ignore rule├ ─ ─ gitignoreGit ignore configuration files├ ─ ─. Postcssrc. Js# postCSS configuration file├ ─ ─ CHAGNELOG, md# version update change release├ ─ ─ index. HTML# HTML templates├ ─ ─ package. JsonNPM package configuration file, which defines the project NPM script, dependencies, etc└ ─ ─ the README. Md# Project information document
Copy the code

3.3 Naming Resources

3.3.1 The directory name

You can intuitively feel the function of the current directory file
Named after the small hump
Special abbreviations may begin with a capital letter

│ ├─ Pages / │ ├─ Components / │ ├─ UItemp/Copy the code

3.3.2 rainfall distribution on 10-12The page name

Can intuitively feel the effect of the current file
Named after the small hump

│ │ ├─ Login. Vue# Login page│ │ ├─ changePhone. Vue# User Center - Modify the phone number page
Copy the code

3.3.3 The component named

Visualize the purpose of the current component
Component names are always multiple words to avoid conflicts with HTML elements or tags
Either start with a capital letter or always use a line link (here items start with a capital letter)

/ / counterexample components / | - MyButton. Vue | - VueTable. Vue | - Icon. Good example vue / / components / | - BaseButton. Vue | - BaseTable. Vue | - BaseIcon.vueCopy the code

We doPicture naming

Image folders are usually named after pages or modules, such as login/).
Do not name the image arbitrarily, and do not name the image with numbers such as 0,1 and so on.
The image name can follow the following rules: Usage + Description. Separate multiple words with underscores (_), for example: login_icon. PNG,pwd_icon.png
Images below 10K are suggested to be placed under Assets /img (webpack directly into base64 embedded)
Large and infrequently changed images are placed under public/img
Images are prohibited for styles written in CSS
Internationalized pictures, suffix using simplified – CN, English -en, traditional – TW

│ ├── │ ├─ img/# image│ │ ├─ Common /# Public images│ │ ├─ Default_avaton.png# Default avatar│ │ ├─ login/# Login module│ │ ├─ ├─ login1.png# Login module picture│ │ │ │ ├ ─ ─ login_icon - en. PNG │ │ │ │ ├ ─ ─ login_icon - cn. PNG │ │ │ │ ├ ─ ─ login_icon - tw. PNG │ │ │ ├ ─ ─ the userInfo /# picture of user-centric module
Copy the code

3.4 Resource Usage

3.4.1 trackComponent usage specification

When used inv-At the beginning
Naming follows the component naming convention
It is recommended to close the label with a single label

<v-BaseButton :data="data"/>
<script>
 export default{
     components:{
         "v-BaseButton":BaseButton
     }
 }
</srcipt

Copy the code

3.4.2 Specification for use of pictures

Under the project, there are two folder to place picture address SRC/assets/img, public/img

Webpack will directly copy images from public/img, so when placing your images in public/img, to prevent duplicate image packaging, follow the following formula:

public/imgDisallow require when calling the image below

This is because images that pass the require call are packaged by Webpack to generate the hash suffix, which is the same as images under ‘public/img’

let img1 = require('.. /public/img/xxxx')// Error
let img2 ='.. /public/img/xxxx'// Write it correctly
Copy the code

public/imgThe image below cannot be embedded directly in the img SRC

Because images in the IMG tag SRC are also packed by Webpack

<! -->
<img src=".. /public/img/xxx">
<! -->
<img :src="`.. /public/img/xxx`">
Copy the code

src/assets/imgThe following image must be written using require, otherwise an error will be reported

<! -->
<img src=".. /asset/img/xxx">
<! -->
<img :src="`.. /asset/img/xxx`">
Copy the code

let img1 = require('.. /asset/img/xxxx')// Write it correctly
let img2 ='.. /asset/img/xxxx'// Error
Copy the code

Images are divided in this way to prevent repeated packaging of images and increase the volume of the project

3.5 Project Routing

3.5.1 Route Naming

Common route (non-dynamic multi-level) naming, you can directly use the page component name.

{
    path: '/login'.name: 'login',
    component(resolve) {
        require.ensure(['.. /pages/login/login.vue'], () => {
            resolve(require('.. /pages/login/login.vue')); }); }},Copy the code

Dynamic multi-level routing follows: Purpose or function or function.

/ user/personal/infomaition user center - > personal center - > personal information/user/company/infomaition user center - > business center - > corporate informationCopy the code

3.5.3 Multi-level Routing

The nesting cannot exceed three layers.

3.5.4 Route Permission

3.5.4.1 Login permissions

You do not need to log in to common pages. You need login permission to view important pages.

The login permission field is determined in the routing meta tag.

meta: {
    requireAuth: true // True requires login permission
}
Copy the code

3.5.4.2 Administrator Rights

Permissions of the administrator:

Display the management entrance, enter the background management.
The navigation structure is displayed differently.
If the path is the same as that of ordinary users, different contents are displayed.

Render different components or pages according to different permissions.

(4) Coding specifications

4.1 HTML specification

4.1.1 File coding

The beginning declares the document type
Using language attributes
- English: “useful – Hans”
- Simplified Chinese: “zh-cmn-Hans”
- Traditional Chinese: “zh-cmn-hant”
- English: “en”
Use UTF-8 encoding without BOM
Specify the encoding in HTML<meta charset="utf-8">
SEO optimization
Viewport is scalable (optimized for mobile devices)
Favicon: If not specified, most browsers will request a favicon in the root directory. To avoid a 404 error, there are two solutions: one is to place the favicon.ico file in the root directory, or use link to specify the Favicon file


      
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <! -- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="shortcut icon" href="path/to/favicon.ico">
  </head>
</html>
Copy the code

4.1.2 External link resource URL protocol

Omit HTTP/HTTPS protocol in URL of external link resources (pictures and other media resources), make URL become relative address, avoid Mixed Content problem and reduce file bytes.

Mixed Content: a problem caused by mixing HTTP and HTTPS.

The URL of other protocols (FTP, etc.) is not omitted.

<! Recommend -- -- -- >
<script src="//www.xxx.cn/statics/js/autotrack.js"></script>

<! -- Not recommended -->
<script src="http://www.xxx.cn/statics/js/autotrack.js"></script>
Copy the code

Recommend * / / *
.example {
  background: url(//www.google.com/images/example);
}

/* not recommended */
.example {
  background: url(http://www.google.com/images/example);
}
Copy the code

4.1.3 The order of attributes in the tag

class(classIs the highest reuse design, should be first)
id name(idShould be used sparingly)
data-\\*Custom attributes (Attribute names are all lowercase-Make the connection)
src(Resource Document)
placeholder title alt(hint)
required readonly disable(auxiliary)

4.1.4 semantic

Semantic HTML structure, help machine search, ensure code readability.

Common tag semantics

The label	The semantic
`<p>`	The paragraph
`< h1, 2, 3 >`	The title
`<ul>`	Unordered list
`<ol>`	An ordered list
`<blockquote>`	Large section of the reference
`<cite>`	General reference
`<b>`	Bold the style
`<strong>`	Bold for emphasis
`<i>`	Tilt for style
`<em>`	Tilt for emphasis
`<code>`	Code identification
…	…

Such as:

H1 headings, usually used as banner backgrounds, have one or more headings per page
H2 section headings, which can be multiple
Article titles in section H3
H4, H5, H6 subheadings/subheadings
P paragraphs

├ ─ ─ h1 - articles headlines │ ├ ─ ─ h2 - here is a node │ │ ├ ─ ─ h3 - node within the article title │ │ │ ├ ─ ─ h4, h5, and h6 - subtitle/author information │ │ │ ├ ─ ─ p - paragraph │ ├ ─ ─ h2 - Here is a node │ │ ├ ─ ─ h3 - node within the article title │ │ │ ├ ─ ─ h4, h5, and h6 - subtitle/author information │ │ │ ├ ─ ─ p - paragraphsCopy the code

4.1.5 Quotes specification

Attribute values are wrapped in double quotes

<div :data="data" data-src="some"></div>
Copy the code

4.1.6 Annotation specifications

<! - the head -- -- >
<view class="header">
  <! -- LOGO -->
  <image class="logo"></image>
  <! -- /LOGO -->
  <! Details -- -- -- >
  <view class="detail"> </view>
  <! -- / details -->
</view>
<! -- / head -->
Copy the code

4.2 the CSS specification

2CSS initialization and common styles

/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = CSS initialization = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
 
 /* margin padding initialized to 0 */
 body.h1.h2.h3.h4.h5.h6.hr.p.blockquote.dl.dt.dd.ul.ol.li.pre.form.fieldset.legend.button.input.textarea.th.td {
	margin: 0;
	padding: 0;
}

body.button.input.select.textarea {
	font: 12px/1.5tahoma, arial, \5b8b\4f53;
}

h1.h2.h3.h4.h5.h6 {	font-size: 100%; }address.cite.dfn.em.var {	font-style: normal; }code.kbd.pre.samp {font-family: couriernew, courier, monospace; }small {font-size: 12px; }ul.ol {list-style: none; }a {text-decoration: none; }a:hover {text-decoration: none; }sup {vertical-align: text-top; }sub {vertical-align: text-bottom; }legend {color: # 000; }fieldset.img {border: 0; }button.input.select.textarea {font-size: 100%; }table {
	border-collapse: collapse;
	border-spacing: 0;
}

html.body {font-size: 10px ! important; }Copy the code

Flex layout common style class, font size style class, margin,padding class:

/* Flex layout shared style class, font size style class, margin,padding (if required, Can add) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /. Yl - flex {dispaly: flex; } .flex-center-center{ justify-content: center; justify-items: center; align-items: center } .flex-start-center{ justify-content: start; justify-items: center; align-items: center } .flex-end-center{ justify-content: end; justify-items: center; align-items: center } .flex-wrap{ flex-wrap: wrap; } .flex-column{ flex-direction:column; } .flex-space-around{ justify-content: space-around; } /* text */. Tl {text-align: left; } .tr { text-align: right; } .tc { text-align: center; } /* button */.btn {display: inline-block; } .btn-success { background: @success; } .btn-error { background: @error; } /* Disable */. Disabled {outline: 0 none; cursor: default ! important; opacity: .4; filter: alpha(opacity=40); -ms-pointer-events: none; pointer-events: none; } /* float and clear float */. Fl {float: left; } .fr { float: right; } .fix { *zoom: 1; } .fix:after { display: table; content: ''; clear: both; } /* display */. Dn {display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } .dt { display: table; } /* position */.pr {position: relative; } .pa { position: absolute; } .pf { position: fixed; } .ml20 { margin-left: 20px; } .ml10 { margin-left: 10px; } .mr20 { margin-right: 20px; } .mr10 { margin-right: 10px; } .mt20 { margin-top: 20px; } .mt10 { margin-top: 10px; } .mb20 { margin-bottom: 20px; } .mb10 { margin-bottom:10px; } .ml5{ margin-left:5px; } .m10{ margin:10px; } .m20{ margin:20px; } .p10{ padding:10px; } .p20{ padding:20px; } .pb20{ padding-bottom:20px; } .pb10{ padding-bottom:20px; } .pt20{ padding-top:20px; } .pt10{ padding-top:10px; } .pl20{ padding-left:20px; } .pl10{ padding-left:10px; } .pr20{ padding-right:20px; } .pr10{ padding-right:10px; } .rotate90{ transform: rotate(90deg); } .rotate180{ transform: rotate(180deg); } .rotate270{ transform: rotate(270deg); } / / img-middle{object-fit: contain; } /* Text beyond hidden */.txt-ellipsis{overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .min-h100{ min-height:100%; } .show { display: block; } .hide { display: none; } /* font */.f12 {font-size: 12px; } .f14 { font-size: 14px; } .f15 { font-size: 15px; } .f16 { font-size: 16px; } .f18 { font-size: 18px; } .f20 { font-size: 20px; } .f24 { font-size: 24px; } .f36 { font-size: 36px; } .f48 { font-size: 48px; } /* Scrollbar */.scrollbar style::-webkit-scrollbar {width: 5px; height: 5px; } .scroll-style::-webkit-scrollbar-thumb { border-radius: 3px; background: #ccc; } .scroll-style::-webkit-scrollbar-track { width: 7px; background: #ebebeb; }Copy the code

4.2.2 `id class`Naming rules

First name it according to the content, for example:nav.header
Child elements in the content-Links with all lowercase names, such as:card-item
Modify class (mutable) use--Links, such as:card-item--warning
If there is no content, assist with actions, such as:box-shawder
It can be abbreviated without affecting the semantics, for example:img-box.btn
Avoid AD blocking vocabulary:ad.gg.banner.guagngao

holdingsattribute

Attribute order

Location properties (position.top.right.z-index.display.flaot)
Size (width.height.padding.margin)
The text (font.line-height.letter-spacing.color)
Background (background.border)
Other (animation.transition)

Attribute shorthand

Property abbreviations require you to be very clear about the correct order of property values, and in most cases you do not need to set all the values contained in property abbreviations, so separate declarations are recommended to be clearer;


/* not good */
.element {
    transition: opacity 1s linear 2s;
}
 
/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}
Copy the code

Margin, as opposed to padding, needs to be abbreviated; Margin, as opposed to padding, needs to be abbreviated;

4.2.4 Media queries

Try to keep the rules for media queries close to the rules related to them, and don’t put them together in a separate style file or at the bottom of the document, which only makes it easier for people to forget them later.

.element-selected { ... } @media (max-width: 768px) { .element-selected { ... }}Copy the code

4.2.5 Annotation specifications

Comments between component blocks and child components

/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = component pieces = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /

/ * subcomponent block = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/ * subcomponent block = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
.selector-secondary {
  display: block; / * comment * /
}
Copy the code

Single-line comments/ *Followed by a space

/* xxx */
Copy the code

4.2.6 Less specification

Organize order
- @import
- Variable declarations
- Style statement
Avoid excessive nesting and limit the nesting depth to 3 levels

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}
Copy the code

4.2.7 Other specifications

Remove the 0 after the decimal point, e.g. Rgba (0,0,0,0.5)=>rgba(0,0,0,.5)
Keep the color code short, such as # FFF
Use element selectors sparingly. Mixing element selectors with ID and Class also violates the separation of concerns. If the HTML tag is modified, you have to modify the CSS code, which is not conducive to later maintenance.

/* not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

Recommend * / / *
#nav {}
.box-video {}
#username input {}
#example {}
Copy the code

4.3 JavaScript coding specifications

4.3.1 The indentation

HTML, CSS,js indent the same, use 4 Spaces.

4.3.2 The blank space

Binary operator before and after
Before and after the ternary operator
The code block{before
Before keywords: else, while, catch, finally
After keywords: if, else, for, while, do, switch, case, catch, finally, with, return
Single-line comments//After, multiple line comments/ *after
Object before the property value
The for loop
Between the parameters of a function
Operator before and after
Function declaration, function expression(Don’t space before,)After the blank space

4.3.3 A blank line

After variable declaration
Before the comments
After the code block
Leave a blank line at the end of the file

let string = 'my'

let obj = {
    'name': 'yang'
}

{
    // do something
}

/* zheli */
if{}else{}Copy the code

4.3.4 quotes

Use single quotation marks for the outermost layer.

let str = 'my name is'
Copy the code

4.3.5 Template string

Need splicing, use as little as possible+, using more template strings


let str1 = 'yang'

let string = `hello ${str1}`

Copy the code

4.3.6 Naming conventions

Variable naming: Small hump naming
Parameter name: Small hump name
Function name: small hump named
Method/property name: small hump name
The class name starts with a capital letter
Private properties, variables, and methods begin with an underscore _.
Constant names: all uppercase + underscore
A multi-word abbreviation in which the case of all letters is the same as the case of the first letter, depending on the current nomenclature and where it occurs.
The semantic
- Variables should be nouns, as close to the current meaning as possible
- Boolean types should start with is, has, etc
- Click event name: tap + onClick()


let loadingModules = {};

const HTML_ENTITY = {};

function stringFormat(theBells) {}

function insertHTML(element, html) {}

function Engine(options) {}

Copy the code

4.3.7 Binary ternary operator

Can be used for simple if substitution
Operators are always written on the previous line to avoid unexpected problems

/ / do not recommend
var x = a ? b : c;

/ / recommend
var y = a ?
    longButSimpleOperandB : longButSimpleOperandC;

var z = a ?
        moreComplicatedB :
        moreComplicatedC;
Copy the code

4.3.8 && and | |

The binary Boolean operator is short-circuited and evaluates to the last term only if necessary.

/ / do not recommend
function foo(opt_win) {
  var win;
  if (opt_win) {
    win = opt_win;
  } else {
    win = window;
  }
  // ...
}

if (node) {
  if (node.kids) {
    if(node.kids[index]) { foo(node.kids[index]); }}}/ / recommend
function foo(opt_win) {
  var win = opt_win || window;
  // ...
}

var kid = node && node.kids && node.kids[index];
if (kid) {
  foo(kid);
}
Copy the code

v4.3.9The specification

Use let to declare variables rather than var.

4.3.10 A semicolon

The following situations require a semicolon

expression
return
throw
break
continue
do-while

4.3.11 Annotation specifications

Single-line comment, exclusive line, // followed by space
Multi-line comments, /* followed by a space
Function/method comments
- Comments must contain function declarations and must comment out identifiers if they have arguments and return values
- Parameters and return types must contain type information and description
- The @inner identifier is used when the function is an internal function and cannot be accessed externally


/ / comment

* @param {string} p1 Parameter Description * @param {string} p2 Parameter description 2, * @param {number=} p3 (optional) * @return {Object} /* function foo(p1, p2, p3) {return {p1: p1, p2: p2 } }Copy the code

4.4 ESlint Syntax Checking

Grammar detection can help us determine whether some of the grammar is accurate.

Front-end development specification documentation