I. General specifications

  1. Directory building specifications

  • SRC/API module request method. You should refer to the structure of direct subfolders in SRC/Views for mapping.

  • Static resource files for the SRC/Assets project. Static files (images, fonts, etc.) are still better handled by Webpack because smaller files are packaged into files, reducing requests and compressing third-party packages. This module files, if also need to be extended, a word as folder name! Keep it simple.

  • SRC /common Common dynamic scripts and styles. In practice, styles might be written in a variety of preprocessing languages, so organize the directory structure yourself.

  • SRC/Components Public components. Place the abstract infrastructure and business components in the project. You should create a separate folder for each component to isolate components, and have a default file: index.vue to save a few letters when importing components. The file in the default component is the smallest unit and should not rely on other components or manipulate state.

  • SRC/HTTP is all about encapsulating the request method. It is recommended that you do not change it during development because it will affect the whole world.

  • SRC/Store data center. This section is more content, separate, for details: data center

  • SRC /router Indicates the page route. By default, all route mappings are written in a file. If you need to modularize routes, organize them by yourself.

  • SRC /views Indicates the page of all service logic.

─ ─ project - the name

├─ Public Project Public Catalogue

│ ├─ Favicon. Ico Favourite

│ ├ ─ ├ ─ sci-1.html

├─ SRC project source directory

│ ├─ Main. Js entry JS file

│ ├─ App. Vue Root Component

│ ├─ API to put all requested data interfaces in separate JS files according to modules

│ │ ├─ Home.js home interface

│ ├─ Detail.js, etc

│ │...

│ ├─ Assets Static Resources, Public Static Resources, Pictures, fonts, etc

│ ├─ Fonts Resources

│ ├─ Images

│ │...

│ ├─ Common Script, Style, Configuration, dynamic information

│ ├─ JS Public Script

│ │ │ ├ ─ utlis.js public JS utility functions

│ │ ├ ─ config.js public configuration

│ │ │...

│ ├─ Style Public Style for all kinds of pre-processing languages

│ │ ├ ─ index. CSS style file

│ │ ├ ─ reset. CSS to reset the style

│ │ │...

│ │...

│ ├─ Components Public Component Directory

│ ├─ Confirm Frame components

│ ├ ─ ├ ─ garbage

│ ├─ Scroll component

│ ├ ─ ├ ─ garbage

│ │...

│ ├─ HTTP Encapsulating HTTP Request methods

│ ├─ ├─ Axios. Js Package

│ ├─ ├─ JSONP.js JSONP package

│ │...

│ ├─ Store Data Center

│ ├─ ├─ State data source

│ ├── retro. js method definition for simultaneous modification of state data

│ ├─ mutation types. Js definition of Mutations

│ │ ├─ Actions. Js Async state data

│ │ ├─ Getters. Js Method for getting data

├ ─ ├ ─ index.js data center import file

│ ├─ Routes Front End

│ │ └ ─ ─ index. Js

│ └ ─ ─ views the page directory, all the pages of the business logic should be put here

│ ├─ Home App Home

│ │ └ ─ ─ index. Vue

│...

├─.env.Development Vue development environment configuration

├─.env.Production Vue Generate environment configuration

├─.esLintrc.js Eslint Configuration file

├─.gitignore Git Ignore files

├─ Package. json package dependency file

├─ Package-lock. json Dependency package version management file

├─ README. Md Introduction

├─ Vue. Config. js Vue/CLI project Scaffolding Configuration

Copy the code

  1. Component/instance option order
  • name
  • components / directives / filters
  • extends / mixins
  • model / props / propsData
  • data / computed
  • Watch/Lifecycle hooks
  • methods

<script>

export default {

Name: 'ExampleName', // Recommended name: hump with a capital letter.

Props: {}, // props definition.

Components: {}, // Component definition.

Directives: {}, // Directive definition.

Mixins: [], // Mixin definitions.

Data () {// Data definition.

return {

DataProps: "// Each variable of the Data property needs to be commented at the end to explain the purpose

}

},

Computed: {}, // Compute attribute definitions.

Created () {}, // Life hook functions in the order they are called.

Mounted () {}, // Mount the element.

Activated () {}, // Use the keep-alive wrapped component to activate the triggered hook function.

Deactivated () {}, // Triggers the hook function when a keep-alive wrapped component leaves.

Watch: {}, // Property change listener.

Methods: {// Component method definition.

PublicbFunction () {} // Public method definitions that can be provided for external use

_privateFunction () {} // Private method, defined by underscores, for use within components only.

}

}

</script> Copies the code

  1. The order of element attributes

  • is

  • v-for / v-if / v-else-if / v-else / v-show / v-cloak

  • v-pre / v-once

  • id

  • ref / key / slot

  • v-model

  • v-on

  • v-html / v-text

4. Basic principle: separation of structure, style and behavior

  • Try to make sure that documents and templates contain only HTML structure, that styles are in CSS stylesheets, and that behavior is in JS scripts
  • Tags should be well-structured and semantically correct.
  • Javascript should enhance the user experience incrementally.
  1. annotation

When writing comments, be careful: state what the code does, and make comments where important. Every piece of code doesn’t have to be fully described, it adds weight to HTML and CSS code. It depends on the complexity of the project.

5.1 Single-line Comments:

Single-line comments start with two slashes and end with the end of the line

// a function is called

setTitle(); var maxCount = 10; // Set the maximum number of code copies

5.2 Multi-line comments

/ *

* The setTitle() function is called when the code executes here

* setTitle() : Sets the value of title

*/ Copy the code

5.3 Function Comments

/ * *

* Begins with an asterisk, followed by a space, and the first behavior function description

* @param {type} parameter Parameter of a separate type

* @ param {} [type | | type] multiple types of parameters

* @param {type} [Optional] Parameter Optional parameters are wrapped with []

* @return {type} Description

* @author Create time modify time (short date) change someone else's code to leave a name

* @example (if necessary)

*/ Copy the code

5.4 File Header Comments

KoroFileHeader is a plug-in that automatically generates comments in VScode file headers

5.5 Conditional Notes

<! --[if IE 9]>

. some HTML here ....

<! [endif]--> Copy code

2. HTML specification

  1. General agreement

The label

  • Self-closing labels do not need to be closed (for example, IMG Input BR HR).
  • Optional closing tag, which must be closed (for example:

    • Or a);

  • Minimize the number of labels;

Ex. :

The Class and ID

  • Classes should be named after functionality or content, not presentation;
  • The class and ID words are lowercase letters. If there are multiple words, separate them by hyphens (-).
  • Use unique ids as Javascript hooks while avoiding creating classes with no style information;

<! -- Not recommended --><div class="item-hook left contentWrapper"></div>

<! -- Recommended --><div id="item-hook" class="sidebar content-wrapper"></div> Copy code

Attribute order HTML attributes should appear in a specific order to ensure readability.

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="..." > Copy code

nested

Nesting is not allowed

Such constraints are semantically nested, as distinguished from strictly nested constraints such as
Nesting is not allowed
. Strict nesting constraints are not allowed in all browsers; With semantic nesting constraints, browsers are mostly fault-tolerant, and the resulting document tree may differ from one another.Semantic nesting constraints