Meet-Admin

English | 中文

Introduction

Meet-Admin is an open-source admin framework based on Vue 3.4, TypeScript, Vite 5, Pinia, and Element-Plus. It uses the latest technology stack. This project also wraps common components, hooks, directives, dynamic routing, and other features.

Online preview

• Link：https://admin.wjp.plus

Code repository

• GitHub：https://github.com/wjp980108/meet-admin

Project documentation

• Project update log：CHANGELOG.en-US.md

• Project document address：https://docs.wjp.plus

Project function

• Developed using Vue3.4 + TypeScript, single file component**<script setup>**
• Use Vite5 as project development and packaging tool (configuration of gzip/brotli packaging, tsx syntax, cross-domain proxy...)
• Use Pinia to replace Vuex, lightweight, simple and easy to use, integrating Pinia persistence plug-in
• Use TypeScript to encapsulate the entire Axios secondary package (request interception, cancellation, common request encapsulation...)
• Supports Element component size switching, dark mode, and i18n internationalization
• Use VueRouter to configure dynamic routing and lazy loading of routes
• Use KeepAlive to cache pages and support multi-level nested route caching
• Use husky, lint-staged, commitlint, czg, cz-git to standardize submission information

Installation and usage steps

• Clone：

# GitHub
git clone https://github.com/wjp980108/meet-admin.git

• Install：

pnpm install

• Run：

# development
pnpm dev

# test
pnpm dev:test

# production
pnpm dev:prod

• Build：

# test
pnpm build:test

# production
pnpm build

• Lint：

# Eslint instrumentation code
pnpm lint

# Eslint fix code
pnpm lint:fix

• commit：

# Submit the code (the lint:lint-staged command will be automatically executed before submission)
pnpm commit

File resource directory

Meet-Admin
├─ .github                 # GitHub configuration file
├─ .husky                  # Husky configuration file
├─ build                   # Vite configuration file
├─ public                  # Static resource files (this folder will not be packaged)
├─ src
│  ├─ api                  # API interface management
│  ├─ assets               # Static resource files
│  ├─ components           # Global components
│  ├─ config               # Global configuration items
│  ├─ constants            # Global constants
│  ├─ directives           # Global directive file
│  ├─ hooks                # Commonly used Hooks packages
│  ├─ locales              # Language internationalization i18n
│  ├─ layouts              # Frame layout module
│  ├─ router               # Route management
│  ├─ stores               # Pinia store
│  ├─ styles               # Global style file
│  ├─ typings              # Global ts declaration
│  ├─ utils                # Commonly used tool library
│  ├─ views                # All project pages
│  ├─ App.vue              # Project main component
│  └─ main.ts              # Project entry file
├─ .env                    # Vite common configuration
├─ .env.dev                # Development environment configuration
├─ .env.prod               # Production environment configuration
├─ .env.test               # Test environment configuration
├─ .gitignore              # Ignore git commits
├─ .nvmdrc                 # Node version management configuration
├─ CHANGELOG.en-US.md      # Project update log (English)
├─ CHANGELOG.zh-CN.md      # Project update log (Chinese)
├─ commitlint.config.js    # Git commit specification configuration
├─ eslint.config.js        # Eslint configuration file
├─ index.html              # Entry html
├─ LICENSE                 # Open source agreement document
├─ package.json            # Dependency package management
├─ pnpm-lock.yaml          # Pnpm dependency management
├─ README.md               # README introduction
├─ README.zh-CN.md         # README introduction (Chinese)
├─ tsconfig.json           # Typescript global configuration
├─ uno.config.ts           # UnoCss configuration file
└─ vite.config.ts          # Vite global configuration file

Browser support

• For local development, it is recommended to use the latest version of Chrome browser Download。
• The production environment supports modern browsers, IE browser is no longer supported, more browsers can view Can I Use Es Module。

not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Project backend interface

The project backend interface completely uses Mock data, thanks to the following Mock platform support:

• EasyMock：https://mock.mengxuegu.com