English | 中文

Preface

The current framework is a minimalist framework based on vue3 + typeScript + vite

Basic integration

• vue3

• typeScript

• tsx

• vite

• vue-router

• eslint

• pnpm

• mock

• axios (Complete secondary encapsulation of axios, global error interception, common request encapsulation with TypeScript)

• pinia

• tailwindcss (Vscode can install tailwindcss plug-in, syntax prompt)

• vite-plugin-checker (If the ts type is checked, the ts error message is displayed on the CLI and page. If the TS type is not corrected, the development cannot continue)

• @vueuse/core ( A collection of utility functions based on Composition API, and hooks for vue Official website )

Optimal configuration

• gzip
• Multi-environment configuration
• unplugin-auto-import (Automatically import apis such as vue and Vue-router on demand)
• rollup-plugin-visualizer (Performance analysis)
• terserOptions (Terser plug-in support is required to configure the removal of console and debugger)
• cdn configuration to optimize the packaging volume (Use CDNS only in packaging environments)

Compatible configuration

• @vitejs/plugin-legacy
• browserslist Works with @vitejs/plugin-legacy plug-in
• autoprefixer

Use

Develop

Depending on your custom, configure both dev and serve to start your development environment

pnpm run dev
or
pnpm run  serve

Pack

• Test environment

pnpm run build:test

• Formal environment

pnpm run build

You can configure your own environment。

Package preview

You can preview the packaged files to simulate the online environment

pnpm run preview

It must be executed after build

Update package

pnpm install -g npm-check-updates

View packages that need to be updated

ncu

Update all packages (only modify your package. json file)

ncu u

Run pnpm i to update the installed packages and pnpm-lock.json.

pnpm i