“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Write in the front: this is what I wrote for myself, so that I can quickly get started with Vue3 project in the future. At present, I am in the stage of learning Vue3 but still developing with VUe2. A good memory is better than bad writing.

It’s about my record of Vue3 project construction

Vite replaces webPack configuration files

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; / / https://vitejs.dev/config/ export default defineConfig ({plugins: [vue ()], base: ". / ", / / packaging path to resolve: {alias: {' @ ': Path.resolve (__dirname, './ SRC '),// set alias}}, // package configuration build: {target: 'modules', outDir: 'dists', // specify output path assetsDir: 'assets', // specify the path to generate static resources minify: 'terser' // obfuscator, terser builds smaller file size}, // globally configure SCSS variables CSS: {preprocessorOptions: {SCSS: { additionalData: '@import "./src/assets/scss/global"; '}}}, server: {port:8084,// start port open: true, proxy: {'/ API ': {target: 'https://localhost:8084', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } }, cors:true } })Copy the code

Code hint plug-in for vscode

//Volar formatting code // unplugin-vue-Components automatically introducedCopy the code

Configuration tsconfig. Json

// I haven't studied it yetCopy the code

Global style

Style-index. SCSS // entry management file - element. SCSS // Component traversal style - global. SCSS // Global style - color. SCSS // color management - var. SCSS // variable managementCopy the code

Tailwind.css

It is similar to the style of BS framework. If I didn’t find it before, I will write a SCSS style file by myself, which is used to display:flex; justify-content: space-between; align-items: center; Class =”d-flex”> 

// This is the basic function of Tailwind. CSSCopy the code

Pinia –> Alternative to Vuex

If the project as a whole is similar to VUE3 + TS, then VUex should also be replaced, because VUex’s support for TS is limited, and a replacement is inevitable.

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () =>({}),
  getters: {},
  actions: {}
})
Copy the code

The characteristics of

  • Pinia’s API design is very close to the Vex5 proposal (designed by the core team of VUE)
  • Pinia also works with Vue DevTools and is eaten in the same way as Vuex
  • Innate type inference (TS low-level)

The difference between

  • The ID is required to connect the store being used to DevTools.
  • Creation method:new Vuex.Store(...)(vuex3),createStore(...)(vuex4).
  • In contrast to Vex3, state is now a function return object.
  • There is no mutations, don’t worry, the change of state is still recorded in DevTools.
  • Ditching mutations and going straight to Actions

Asynchronous request (AXIOS)

Asynchronous requests are used in much the same way, except now that TS has been added, some of the function syntax has been changed, and some of the general operations on asynchronous requests have been recorded

  • throughimport.meta.env.VITE_APP_BASE_URLGet environment variables and configure thembaseURLIf the interface has multiple domain names, it can be controlled by js variables.
  • Set up thetimeoutHandle request timeout or disconnection.
  • Set up theRequest headerCarry,token.
  • Exception interceptionThe back end passes through what you carrytokenDetermine if you are out of date if returned401You may need to jump to the login page and be prompted to log in again.
  • Response interception, usually the back end returns code, data, MSG, if the request is normal, we can directly return data data, if it is abnormal code, we can also directly pop up an error message here.
  • Refresh the token without feeling. If your token expires, you can call the refresh interface through the refreshToken returned by the backend to obtain a new token. Of course, there are many details involved, such as terminal requests, resending requests, and reordering requests.
  • Interrupt a request, such as a page switch, where we interrupt a request in progress.

Route Management (VUE-Router4)

RouteRecordRaw: RouteRecordRaw: RouteRecordRaw: RouteRecordRaw:

  • title: string; Page title, usually mandatory.
  • icon? : string; Icon, usually used with the menu.
  • auth? : boolean; Whether login permission is required.
  • ignoreAuth? : boolean; Whether to ignore permissions.
  • roles? : RoleEnum[]; Accessible role
  • keepAlive? : boolean; Whether to enable page caching
  • hideMenu? : boolean; There are some routes that we don’t want to show in menus, such as some edit pages.
  • order? : number; Menu sorting.
  • frameUrl? : string; Nested outer chain.

unfinished