Frontend Dev Guide

Technology Stack

The project is developed based on Vue3 + TypeScript + Vite + Vuetify, using pnpm-workspace for multi-package management.

Build Tool: Vite
Frontend Framework: Vue3
UI Framework: Vuetify
Router: Vue Router
State Management: Vuex

Directory Structure

The project's directory structure is as follows:

/

.eslintignore
.eslintrc.cjs
.prettierignore
.prettierrc
README.md
package.json
packages
- admin
  - .env
  - README.md
  - index.html
  - package.json
  - public
  - src
  - tsconfig.json
  - vite.config.ts
  - windi.config.ts
- hooks
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
- locale
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
- main
  - .env
  - index.html
  - package.json
  - public
  - src
  - tsconfig.json
  - vite.config.ts
  - windi.config.ts
- types
  - index.d.ts
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
shim-vue.d.ts
tsconfig.eslint.json
tsconfig.json
tsup.config.ts

It includes the following packages:

admin: Admin system
main: Main system
hooks: Custom hooks
locale: Internationalization
types: Type definitions

Configuration

Install the necessary dependencies

bash

cd frontend
npm i -g pnpm
pnpm i

cd frontend
npm i -g pnpm
pnpm i

Develop the Main System

bash

pnpm dev:main

pnpm dev:main

Develop the Admin System

bash

pnpm dev:admin

pnpm dev:admin

Build

bash

pnpm build

pnpm build