1. Project Overview

vue-element-plus-admin is based on element-plus a free and open-source admin dashboard template. It is developed using the latestvue3，vite4，TypeScriptand other mainstream technologies, providing a ready-to-use front-end solution for admin dashboards. It can be used as a project starter template or for learning and reference. It also keeps track of the latest technology trends and updates as early as possible.

vue-element-plus-admin is positioned as an integrated admin dashboard solution and is not particularly suitable as a basic template for secondary development. Because it integrates many features that you may not need, it can introduce considerable code redundancy. If this is not a concern for your project, you can also use it directly as the basis for further development.

For a basic template, switch to the tempalte branch,tempalte which only integrates a few common features, such as layouts and dynamic menus, making it more suitable for developers to customize and extend.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

• Latest Technology Stack: Developed using cutting-edge front-end technologies such as Vue3 and Vite4
• TypeScript: Application-level JavaScript language
• Theme: Configurable themes
• Internationalization: Built-in comprehensive internationalization solution
• Custom Data Built-in Mock data solution
• Permissions Built-in comprehensive dynamic route permission generation solution
• Components Multiple commonly used components with enhanced encapsulation
• Example Rich built-in examples

5. Tech Stack

Preparation

• Node and Git - Project development environment
• Vite4 - Familiarity with Vite features
• Vue3 - Familiarity with Vue basic syntax
• TypeScript - Familiarity with TypeScript basic syntax
• ES6+ - Familiarity with basic ES6 syntax
• Vue-Router-Next - Familiarity with basic Vue Router usage
• Element-Plus - Familiarity with basic Element Plus usage
• Mock.js - Familiarity with basic Mock.js syntax

Installation and Usage

• Get the Code

Access to One Flying Open-source: https://code.exmay.com/ Download

• Install Dependencies

cd vue-element-plus-admin

pnpm install

• Run

pnpm run dev

• Packaging

pnpm run build:pro

Directory Structure

.
├── .github # GitHub workflows
├── .husky # Husky configuration
├── .vscode # VS Code configuration
├── mock # Custom mock data and configuration
├── public # Static assets
├── src # Project source code
│   ├── api # API management
│   ├── assets # Static assets
│   ├── components # Shared components
│   ├── hooks # Common hooks
│   ├── layout # Layout components
│   ├── locales # Language files
│   ├── plugins # External plugins
│   ├── router # Router configuration
│   ├── store # State management
│   ├── styles # Global styles
│   ├── utils # Global utility functions
│   ├── views # Route pages
│   ├── App.vue # Entry Vue file
│   ├── main.ts # Main entry file
│   └── permission.ts # Route interception
├── types # Global types
├── .env.base # Environment variable configuration for local development
├── .env.dev # Environment variable configuration for development builds
├── .env.gitee # Environment variables for Gitee (optional)
├── .env.pro # Environment variable configuration for production builds
├── .env.test # Environment variable configuration for test builds
├── .eslintignore # ESLint ignore configuration
├── .eslintrc.js # ESLint configuration
├── .gitignore # Git ignore configuration
├── .prettierignore # Prettier ignore configuration
├── .stylelintignore # Stylelint ignore configuration
├── .versionrc Configuration for automatically generating version numbers and update logs
├── CHANGELOG.md # Changelog
├── commitlint.config.js # Git commit message convention configuration
├── index.html # Entry page
├── package.json
├── .postcssrc.js # PostCSS configuration
├── prettier.config.js # Prettier configuration
├── README.md # English README
├── README.zh-CN.md # Chinese README
├── stylelint.config.js # Stylelint configuration
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── windi.config.ts # Windi CSS configuration