Top Trading Front-end Architecture

Building with vue-cli3 as a whole

Frame selection vue family barrel + sass+ element-ui

Code Specification Mandatory Use eslint-airbnb Standard

The project is divided into architecture layer, business layer and view layer.

• Architecture layer needs to deal with request encapsulation, request interruption, exception handling, public function encapsulation, global sass variables, landing status judgment, permission routing interception and so on.

• Business layer corresponds to BFF layer, including data storage and data return processing required by view layer, and is also responsible for the return of mock data in the early stage. (not yet applied)

  • View layer is divided into three parts, component part:

    • Everything that is reused more than once needs to be extracted into components.
    • sass Common Section.
    • Global style overwriting of the ui framework is prohibited in App.vue files.

  • View Layer Layout Part:

    • The corresponding logic of the common header, nav and footer parts should be handled in this part.
    • Global gadgets should also be handled in this section.

  • View Layer Specific Pages:

    • Corresponding to high fidelity.
    • In the case of multiple tab s, folders are required to wrap the entire page.

airbnb detailed explanation Front-end development specification

Based on the development habits, the following points are dealt with

rules: {
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-multiple-empty-lines': [1, { max: 2 }], // No more than 2 blank lines
  'no-plusplus': 'off', // Unary operator
  'guard-for-in': 'off', // ergodic
  'no-prototype-builtins': 'off', // Calling methods from instance objects
  'no-restricted-syntax': 'off',
  'no-param-reassign': 'off', // Redistribution
  'class-methods-use-this': 'off'
}

directory structure

┌─public
│ ├─favicon.ico
│ └─index.html
├─src
│ ├─assets
│ │ ├─img // picture
│ ├─components
│ │ ├─common // Common components (e.g. step bar/bill details, etc.)
│ │ ├─containers // Outer container (example: Front container Home, Backstage)
│ │ ├─layout // Layout components (example: front header, front footer)
│ │ ├─views // Page (below is an example)
│ │ │ │ ├─BuyerOrder // buyer's order
│ │ │ │ │ ├─common // Common components for component invocation
│ │ │ │ │ │ ├─filter.vue // Screening Conditions Component
│ │ │ │ │ ├─component // Components for Buyer's Order
│ │ │ │ │ │ ├─BuyerOrderListAll.vue
│ │ │ │ │ │ ├─BuyerOrderListFail.vue
│ │ │ │ │ │ ├─BuyerOrderListNotSigned.vue
│ │ │ │ │ │ ├─BuyerOrderListPlatformProcessing.vue
│ │ │ │ │ │ ├─BuyerOrderListSuccess.vue
│ │ │ │ │ │ ├─BuyerOrderListUnpaid.vue
│ │ │ │ │ │ └─BuyerOrderListUnreviewed.vue
│ │ │ │ │ └─BuyerOrderList.vue // The pages displayed by the buyer's order need to be registered for routing
│ ├─httpConfig // Request encapsulation
│ │ └─http.js
│ ├─style // style
│ │ ├─base.scss // css Reset style
│ │ ├─common.scss // Public style
│ │ ├─element-variables.scss // Modify theme
│ │ └─project.scss // Project Common Style
│ ├─utils // function library
│ │ ├─calc.js // Calculating function (including amount formatting, precise calculation, etc.)
│ │ ├─city.js // Provincial and urban json
│ │ ├─cookie.js // cookie encapsulation
│ │ ├─platform.js // Common functions for projects (defect jumps, etc.)
│ │ └─secret.js // Encryption and decryption function encapsulation
│ ├─App.vue
│ ├─main.js // Import files, permissions judgement, common methods to mount
│ ├─router.js // router
│ └─store.js // Vuex (only for public processing, such as personal information storage, company address, etc.)
├─tests // automated testing
│ ├─unit
│ │ ├─.eslintrc.js
│ │ └─example.spec.js
├─.browserslistrc
├─.editorconfig
├─.eslintrc.js // eslint configuration file
├─.gitignore // git ignores directories
├─.prettierrc.json // Code formatting configuration
├─babel.config.js
├─jest.config.js
├─package-lock.json
├─package.json
├─postcss.config.js
├─README.md
└─vue.config.js // Project configuration, webpack configuration