preface

The architecture covers a wide range of concepts and contents. The core purpose of the architecture is to improve efficiency, reduce costs and ensure quality. At the same time, it needs to be considered comprehensively based on the actual business situation to provide space for sustainable development in the future. Now in the company I am responsible for doing an operational service cloud platform in front of background management system of architecture development, the company’s internal at present the main use of technology stack is Vue, but not very suitable for our project requirements engineering template, therefore on the basis of the original framework according to the actual circumstance of the project for optimization, conform to the actual project requirements.

Technology selection

In the stage of technology selection, we need to consider the technology stack adopted by the company and the technology stack of team members. At present, the mainstream technology stack direction of the company is Vue, so we choose Vue as the main technology framework of the front end.

  • Scaffolding: Around the Vue technology stack, we use the Vue CLI scaffolding tool to quickly build the foundation engineering.
  • \color{red}{UI Component library:}UI component library: In order to improve the efficiency of development and avoid repeating the wheel, we need to choose a set of existing UI component library, we chose the current mainstream ElementUI.
  • \color{red}{Route management:} Route management: Vue Router is used for route control.
  • \color{red}{state management:} State management: Vuex is used to centrally manage the state of components in a project.
  • Color {red}{asynchronous request:} Asynchronous request: Use AXIOS for asynchronous request.
  • Color {red}{style management:} Style management: SCSS is used for style management.
  • \color{red}{static resource:} Static resource ICONS use SVG ICONS.
  • \color{red}{tool library:} Tool library: in order to improve the development efficiency, reduce the JS array, object, string, date and so on the use of difficulty, we use Lodash, dayJS.

The development of specification

Developing a unified code style, naming rules, directory structure and static resource usage specifications in advance can significantly improve development efficiency and quality. Here mainly from the following aspects of standardized management.

  • \color{red}{development tools} Everyone is used to the use of different IDE, may lead to different development styles, try to unify the development tools, We use VS Code for front-end coding development (we can also configure EditorConfig to support uniform coding styles across ides).

  • \color{red}{ESLint} The ESLint code specification is very important in the process of coding, can avoid many coding errors, improve the code readability, we use Airbnb JavaScript code specification.

  • Color {red}{prettier}prettier We use Vetur plug-in for code quality prompt & error, formatting/style, smart prompt formatting.

  • \color{red}{static resource} Static resource management, in the development process, often use a large number of ICONS, here we choose to use SVG icon.

  • \color{red}{code specification} code specification \

    1. Use 2 placeholders for indentation.

    2. Use utF-8 character encoding.

    3. Js code uses single quotes around the outermost layer.

    4. Js code does not need a semicolon at the end.

    5. Variables are named in camel case and constants are all uppercase.

    6. The data option must be a function when the data attribute is used in the build.

      Data (){return {count: 0}} Copies the codeCopy the code

    7. When a prop is defined, at least its type needs to be specified.

      Props: {attr: {type: Object, default: function () {return {}}}} Copy codeCopy the code

    8. V-if and V-FOR cannot be used at the same time. Therefore, V-FOR data can be filtered using computed methods.

      Example of incorrect usage: <div v-for="item in message" v-if="item! Correct examples: <div V-for ="item in getMessage"></div> computed: { getMessage () { return this.message.filter(res=>res! =='a')}} copy the codeCopy the code

    9. Changes to variables are prohibited in computed.

    10. Public method extraction is encapsulated in the utils file directory.

    11. When using prop, do not change the value of prop parameter. Instead, use emit to modify the parameter value.

    12. The data in VUEX must be modified through mutations.

    13. You can use getters to get the data format you want.

    14. The data interface that interacts with the server side should be called in actions as far as possible, and the data obtained will change the state through mutations.

    15. Component-specific styles must be scoped independently.

  • \color{red}{naming rule} naming rule

    1. Folder naming using small hump naming method; For example: \textrm\color{red}{productList, productDetail}productList, productDetail For example: \textrm\color{red}{pages, views, utils}pages, views, utils\

    2. Vue components are named using the officially recommended big hump nomenclature; For example: \ textrm \ color {red} {MyComponent. Vue} MyComponent. Vue

    3. Prop parameter naming adopts small hump naming method. For example: \ textrm \ color {red} {orderId} orderId

    4. Method The custom function is named by the small hump naming method. Prefixes should be verbs; For example: \textrm\color{red}{isNaN, getData}isNaN, getData\

    5. Data attribute naming adopts small hump naming method; For example: \ textrm \ color {red} {orderId} orderId

The process specification

Process specification of requirements iteration, development, testing and launching; If there is no perfect process specification for research and development, the project may not be clear about what functions they have developed, and management will lead to confusion. The general process is as follows:

GIT specification

GIT version, branch, code submission log specification; Internally build GitLab to manage company project code. \

  • \color{red}{branch management} branch management \

    1. The master master branch is used for production deployment and is generally merged by the UAT branch. Code changes on the Master branch are not allowed under any circumstances. \

    2. Uat branch Pre-online branch for user testing in the production environment; It is always consistent with the master branch and is generally merged by the SIT branch. It is not recommended to directly modify the code on this branch. \

    3. Sit Branch The test branch is used for testing in the test environment. It determines whether to develop directly in this branch or on the developer’s local branch based on the size of the project requirements.

    4. Dev branch The dev branch is used to develop new requirements. After the requirements are released, the developer deletes this branch.

  • \color{red}{version management} Version management \

    1. The version number is defined using X.X.X.

    2. The first X represents a major release, and a major iteration represents a release. \

    3. The second X represents minor releases, and a large iteration can be broken up into several minor releases. \

    4. The third X stands for online BUG fixes. \

  • In order to facilitate project management, git commit information should follow a certain format. Using a good commit Message is conducive to code review and faster search for change records. The specification format is as follows:

    <type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer> Copy codeCopy the code
    1. Type is mandatory, which specifies the commit type.
    Feat: feat: new features or feature changes Most of the style improvements, such as removing whitespace, changing indentation, and switching between single and double quotes, do not affect changes to the code logic. Rollback an earlier commit CI: Modify a project's Continuous integration process (Kenkins, Travis, etc.) to commit chore: changes in the build process or helper tools PREf: performance, experience-related commit test: test-related development copy codeCopy the code
    1. subject.
    A short description of the commit, if there is a team management tool (issue,JIRA), etc., with an internally named requirement code as part of the description information. Example: feat:## requirement code development XXX requirement copy codeCopy the code
    1. body.
    Fill in a detailed description for important or complex situations. Copy the codeCopy the code
    1. footer.
    Notes, usually links to BREAKING CHANGE or bug fixes. Watches xx-0001 fix #JIRA_IDCopy the code