CSS related

  1. Use less
  2. Class names follow the KEbab-case convention
  3. Classification of the difference between
  4. Minimize the use of calc functions to speed up page rendering

Js related

  1. All pages are named with small hump and lowercase initials

  2. Components are also named with a small hump, but with a capital letter

    Component names should always be multiple words, except for the root component App

    Meaningful nouns, short and readable

    Naming follows the PascalCase convention

    • Common components begin with CP (project name abbreviation), for example (CPDatePicker,AbcdTable)

    • Intra-page components start with a short component module name and end with Item, for example (StaffBenchToChargeItem, StaffBenchAppNotArrItem)

    • Use follow the KEbab-case (dash delimited naming) convention

    To use components in a page, close them and separate them with short lines, such as (
    ,
    ).

    When importing and registering components, follow the PascalCase convention

    Also note that you must comply with the custom element specification: Do not use reserved words.

  3. Uses the ESLint-Standard specification

  4. Submissions must comply with the CommitLint specification

❯ feat: 🌟 A new feature Fix: 🐛 A bug fix Perf: 🚀 Code changes that improve performance Style: 🌟 Code changes that have no impact on the meaning of the code (Spaces, formatting, etc., non-UI changes) docs: 🌟 Only the document changestest: 🔧 Add some missing tests or fix existing tests refactor: 🔨 code changes that are neither bug fixes nor new featuresCopy the code
. | | - cp - web project structure - editorconfig editor rules. | - gitignore git ignore list. | - gitlab - ci. Yml gitlab - ci line | -- CHANGELOG. | - md change document README. | - package md. Json | -- vue. Config. Js | - config | | -- nginx. Conf nginx reverse proxy | - public | | -- the favicon. Ico | | - Index.html | | - loading. The loading GIF animation | - SRC | -- App. Vue | -- main. Js | -- mock. Js | - API request enclosed here | - static resource assets (generally don't have to, Stored in Ali Cloud OSS, CDN) | -- from the instructions on the components of general component reference component | - the router | | -- index. Js | | - utils general tools function | -- initJsBridge. Js initialization jsbridge | | - JsBridgeMethods js jsbridge specific methods, within the file view instructions | | -- utils. | js universal tool function - page viewsCopy the code

Annotation specifications

  1. Usage instructions for common components
  2. Description of important functions or classes in a component
/** * function description **@param {string} P1 Description of parameter 1 *@param {string} P2 parameter 2, the description of the long * then newline. *@param {number=} P3 (Optional) Description of Parameter 3 *@return {Object} Return value description */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

Copy the code
  1. Complex business logic processing instructions
  2. Special case code processing instructions, for the code for special purpose variables, the existence of critical values, hacks used in the function, the use of a certain algorithm or ideas need to be commented description
  3. Comment blocks must begin with/(at least two asterisks) /;
  4. Single-line comments use //;
  5. Multiple if statements