# Introduction

vue3-element-admin is a production-ready front-end solution for admin interfaces. It based on vue3 and use the UI Toolkit element-plus.

It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.

TIP

This project integrates a lot of features that you may not use, it will cause a lot of code redundancy. If your project does not pay attention to this issue, you can also directly develop it based on it.

Vue3 Integrated Solution: vue3-element-admin
Vue2 Basic Template: vue-admin-template
Vue2 Desktop: electron-vue-admin
Vue2 Typescript: vue-typescript-admin-template (Credits: @Armour)
Others: awesome-project

# Features

- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission
  - Permission configuration page
  - Two-step login

- Multi-environment build
  - dev sit stage prod

- Global Features
  - I18n
  - Multiple dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view (Tab page Support right-click operation)
  - Svg Sprite
  - Mock data
  - Screenfull
  - Responsive Sidebar

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Export Excel
  - Upload Excel
  - Visualization Excel
  - Export zip

- Table
  - Dynamic Table
  - Drag And Drop Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - Drag Dialog
  - Drag Select
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Advanced Example
- Error Log
- Dashboard
- Guide Page
- ECharts
- Clipboard
- Markdown to html

# Preparation

You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using Mock.js. Understanding and learning this knowledge in advance will greatly help the use of this project.

At the same time supporting a series of tutorial articles, how to build a complete background project from zero, suggest that you read these articles and then come to practice this project. But there's no English version yet.

TIP

This project does not support low-level browsers (such as ie). If you need to, please add polyfills yourself.

# Project Structure

This project has built the following templates, and have built a scaffold based on Vue, which should help you prototyping production-ready admin interfaces. It covers almost everything you need.

├── build                      # build config files
├── mock                       # mock data
├── plop-templates             # basic template
├── public                     # pure static assets (directly copied)
│   │── favicon.ico            # favicon
│   └── index.html             # index.html template
├── src                        # main source code
│   ├── api                    # api service
│   ├── assets                 # module assets like fonts,images (processed by webpack)
│   ├── components             # global components
│   ├── directive              # global directive
│   ├── filters                # global filter
│   ├── icons                  # svg icons
│   ├── lang                   # i18n language
│   ├── layout                 # global layout
│   ├── router                 # router
│   ├── store                  # store
│   ├── styles                 # global css
│   ├── utils                  # global utils
│   ├── vendor                 # vendor
│   ├── views                  # views
│   ├── App.vue                # main app component
│   ├── main.js                # app entry file
│   └── permission.js          # permission authentication
├── tests                      # tests
├── .env.xxx                   # env variable configuration
├── .eslintrc.cjs              # eslint config
├── .babelrc                   # babel config
├── .travis.yml                # automated CI configuration
├── vue.config.js              # vue-cli config
├── postcss.config.js          # postcss config
└── package.json               # package.json

# Getting Started

# clone the project
git clone https://github.com/midfar/vue3-element-admin.git

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev:test

This will automatically open http://localhost:9527.

If you see the following page then you have succeeded.

We have built-in models, standard components, mock data, hot module reloading, state management, i18n, global router, etc. You can continue exploring other documents for more details on those topics.

TIP

Suggestion： You can use vue-element-admin as a toolbox or as an integration solution repository, It is recommended to do secondary development on the basis of vue-admin-template, if you need any additional feature, you can copy from vue-element-admin.

# Contribution

The repository of documentation is vue-element-admin-site based on vuepress development.

There may be some spelling or translation errors in the course of writing this document. It is welcome to point out by issue or pr. After all, English is not my mother tongue.

vue-element-admin is also continuing to iterate, summarize and summarize more features, and summarize the best practices of product templates/components/business scenarios in the middle and back office. This project is also very much looking forward to your participation and feedback.

# Donate

If you think this project is useful, you can buy a glass of juice for the author ❤️ Donate

# Browsers Support

Modern browsers.

Chrome	Edge	Firefox	Safari
Chrome ≥ 85	Edge ≥ 85	Firefox ≥ 79	Safari ≥ 14.1

# Vue Ecosystem

First understanding the things in these vue ecosystems will help you get started with this project.

Vue Router Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
Vuex Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
Vue Loader Vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs). The combination of webpack and vue-loader gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.
Vue Server Renderer Vue-server-renderer facilitates building of isomorphic or universal JavaScript applications which runs both on server and client side where majority of the application code is shared and reused.
Vue Test Utils Vue Test Utils is the official unit testing utility library for Vue.js.
Vue Dev-Tools Browser devtools extension for debugging Vue.js applications.
Vue CLI Vue CLI is a full system for rapid Vue.js development. It aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
Vetur Vue tooling for VS Code. Write vue essential plugins under VS Code.