Git address: github.com/Raj6666/vue…

Design ideas

Apis directory design ideas

  • You don’t want to manually introduce multiple apis in one page
  • The API is divided by module
  • The API wrapper needs to have some customizable pass-throughs

Design roadmap of the assets static resource directory

  • Support a variety of static resources storage, including the standard picture directory
  • The global common styles and the style files injected at the project entrance by the utility class styles are also packaged here as static resources

Components Component directory design ideas

  • Common common components are uniformly registered at the project entrance

Request Directory design considerations

  • API (interface), AXIos (request), callback (request callback), interceptor (request interceptor) separate file encapsulation and management, avoid redundancy in a file, increase code readability and maintainability
  • Axios request encapsulation automatically parses the parameters and encapsulates the global loading state internally. Loading in state can be directly read in subsequent components to display the hidden loading style and uniformly encapsulate the callback functions of successful and failed requests
  • Wrapped AXIos must return a Promise object so that all requests in subsequent code can be called async, await, and concatenated
  • The interceptor request interceptor is registered in the entry of the project, which can realize the request customization requirements in the request interception. In the response interception, it directly realizes the unified processing and control of the basic judgment of the HTTP status code, including 401, 403, 404, and 500
  • Mock requests. Mock requests for different modules by module, because the API can also be subcontracted by module, which forms a peer comparison
  • All request interfaces are required to implement mock returns to facilitate interface interfacing in the early stage, so as to ensure that when subsequent interfaces fail, the front-end can trace back the standard results to display and debug the page
  • Mock address link design is designed with /mock in front of the url defined by the back end

Router Indicates the route directory design

  • Automatically loads route configurations in all modules folder modules without manual import
  • Routes in each module must be written in a standard top-down routing pattern
  • Add route guards to provide access for subsequent page access permission configuration

Utils Utility class directory design

  • Level 1 directory tiling project commonly used tool class JS, components/pages are introduced as needed

Views page directory design ideas

  • Level 1 directory, single-page page files such as home (home), login (login page), Error (exception handling page), and each module folder such as userModule (userModule), shoppingmodule (shoppingCartModule) tiled
  • The secondary directory starts with its own hierarchical file distribution in each module module folder

Vue. Config. js standard configuration list

  • Gzip compression
  • CSS global style introduction
  • DevServer development debug configuration
  • Package analysis, output a package analysis page after each package

\

New Configuration Specifications

configuration way legend
api Go to SRC \apis\modules and add the folder of the module you want. Add an index.js file inside the folder, as shown on the right. You can further subdivide the API according to different services in the module, such as HOME and ADS
router Go to the SRC \router\ Modules path and add the configuration file for the desired route. The configuration file should be written according to the standard top-down hierarchical routing method shown on the right. Of course, horizontal multiple routes can be added. However, each route must be configured to import routes automatically regardless of the route writing methodnameattribute
\

Item file tree \

.\ ├─.env. Development - Environment variables \ ├─.env. Production - Environment variables \ ├─.env ├─ ├─ ├─ vue - Project root \ │ ├─ apis\ │ │ ├─ index.js \ │ ├─ ├─ apis\ │ ├─ ├ └ │ ├─ home\ │ ├─ ├─ userModule\ │ ├─ assets \ │ │ ├─ images\ │ │ ├─ ├─ Logo. PNG \ │ │ └ ─ styles - global references style resources \ │ │ ├ ─ border. The CSS reset - border style \ │ │ ├ ─ common. SCSS - global public style \ │ │ └ ─ Variable. SCSS -- global common common utility style, Code reference \ on the basis of the @ include │ ├ ─ components \ │ │ ├ ─ common - global common components \ │ │ │ └ ─ the HelloWorld. Vue \ │ │ └ ─ index. The js - global common components \ │ global registration ├─ Request \ │ │ ├─ Anti-Flag - Axios.js - Axios request package and add public Callback functions for success and failure (including global loading state adjustment) \ │ │ ├─ Interceptors.js - Request interceptors │ │ ├─ ├─ exercises \ ├─ router\ │ │ ├─ exercises \ │ ├─ exercises \ ├─ router\ │ ├─ Auth-guard.js - Route guard \ │ ├─ index.js - Automatically import routes in all modules │ │ ├─ ├─ utils - - standard single-page route setup │ │ ├─ ├─ └ - - standard route setup │ │ ├─ ├─ utils - - Utility class warehouse \ │ │ ├ ─ the date - util. Js \ │ │ └ ─ types. The js \ │ └ ─ views - page \ │ ├ ─ Error. The vue \ │ ├ ─ Home. Vue \ │ └ ─ userModule \ │ ├ ─ Home. vue\ │ ├ ─ tradeManagement\ ├ ─ vueCopy the code