First, how to improve the quality?

1. Divide the directory structure

│ ├─ ├─apis │ ├─ ├─ exercises │ ├─apis │ ├─request │ ├─ exercises │ ├─ exercises │ ├─img │ ├─ └ ─ message. PNG │ └ ─ json / / json │ │ └ ─ map. The json │ └ ─ style / / less/SCCC files │ └ ─ user / / business module │ └ ─ user. The less │ ├ ─ components / / Component │ ├ ─ base / / base/layout components │ │ ├ ─ BaseButtom. Vue │ │ └ ─ BaseNavbar. Vue │ └ ─ custom / / business component │ └ ─ user / / business module │ └ ─ UserTable. Vue │ ├─ ├─ customs.js ├─ customs.js ├─ customs.js ├─ customs.js ├─ customs.js ├─ customs.js ├─ customs.js ├─ customs.js Routing based encapsulation │ └ ─ the router. Js / / if the router is multifarious, │ ├─ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ exercises │ ├─ ├─ class.txt TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXTCopy the code

2. Unified development specifications

(1) Configure ESlint

  • Objective:

Ensure JS code consistency and avoid low-level errors.

  • Usage:

ESLint Configuration Guide

2. Configure Editorconfig

  • Objective:

Ensure consistent formatting of JS code across different editors or ides.

  • Usage:

Create a. Editorconfig file in the project root directory, which writes the following:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
Copy the code

The above code ensures consistency in encoding, indentation, and so on across all file types.

An additional Editor plug-in is required in VSCode to take effect.

3. Uniform code style

(1) Configure Prettier

  • Objective:

Unified JS, JSX code style.

  • Usage:

Prettier Configuration Guide

(2) Configure stylelint

  • Objective:

Unify the CSS code style.

  • Usage:

Stylelint Configuration Guide

4. Project packaging optimization (for production environment)

(1) Remove sourceMap

Configure in vue.config.js:

productionSourceMap: false.// The production environment closes sourceMap
Copy the code

(2) Reference js file using min version

(3) Remove console output

A. Install the babel-plugin-transform-remove-console plug-in in the development environment. B. configure the Babel. Config. Js:

// The Babel plug-in needed during the project release phase
const proPlugins = [];
// Get whether the current -mode is in development or release
if(process.env.NODE_ENV === 'production') {// Mask console output after packaging
  proPlugins.push('transform-remove-console')}module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].// An array of plugins when the product is released
  plugins:[
    ...proPlugins
  ]
}
Copy the code

(4) Introduction of CDN

A. Importing CDN resources into index.html;

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js" crossorigin="anonymous"></script>
Copy the code

B. Vue. Config. js is configured to exclude CDN resources when packaging:

  configureWebpack: {
    externals: {
      echarts: 'echarts',}},Copy the code

No need to mount the vUE prototype for subsequent use.

5. Unify the common library of the project

(1) Request library: AXIos

(2) UI library: ElmentUI

(3) Mobile TERMINAL UI library: Vant

(4) Time library: DayJS

(5) PDF processing library: VUE-PDF

(6) Scroll bar beautification library: Vuescroll

(7) SPA label communication library: Lsbridge

(8) CSS preprocessor: Less

Two, how to improve the speed?

1. Secondary packaging scaffolding

2. Optimize multi-environment deployment

3. Git workflow (submission specification + verification repair + automatic deployment)

4. ElmentUI custom themes

Iii. Recommendation focus

1. vite

2. storybook