vue-element-admin

vue-element-admin is a backend frontend solution based on Vue and element-ui. It provides a complete set of features for enterprise-level admin products, including i18n, dynamic routing, and permission verification.

Key Features

• Authentication: Login/Logout and two-step verification.
• Permissions: Page-level and directive-level permissions.
• Multi-environment Deployment: Support for dev, sit, stage, and prod.
• Global Features: i18n, dynamic themes, dynamic sidebars, breadcrumbs, and Svg Sprite icons.
• Data Handling: Excel import/export, Mock.js integration, and various editors (Markdown, JSON, Rich Text).
• Components: Upload avatars, draggable Dialogs/Selects, SplitPane, and more.

i18n Support

Starting from version v4.1.0+, the default master branch does not support i18n. To use i18n, you must use the i18n Branch.

Versioning and Build Tooling

• The current v4.0+ versions are built on vue-cli.
• If you require an older version that does not rely on vue-cli, switch to the tag/3.11.0 branch.

Browser Compatibility

This project does not support low-version browsers (e.g., IE) out of the box. If you need to support them, you must add polyfills manually.

Internationalization (i18n)

In versions v4.1.0+, the master branch does not support internationalization by default. If you require i18n, use the i18n branch, which is kept in sync with master.

Build System

Versions v4.0+ are built using vue-cli. If you require an older version that does not depend on vue-cli, you can switch to the tag/3.11.0 branch.

To get a local development environment running, clone the repository, install the dependencies using npm, and start the development server. The application will automatically open at http://localhost:9527.

# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev

The project provides several advanced commands for previewing the build, analyzing static resources, and maintaining code quality through linting.

# Vista previa con efectos de entorno
npm run preview

# Vista previa con efectos + análisis de recursos estáticos
npm run preview -- --report

# Chequeo de formato de código
npm run lint

# Chequeo de formato de código y auto-corrección
npm run lint -- --fix

Before installing, ensure you have Node.js and Git installed locally. The project relies on the following core technologies:

• Vue.js (v2.6.10)
• Element UI (v2.7.0)
• Vue CLI
• Vuex & Vue Router
• Axios
• Mock.js (for simulated data requests)

Note: The project is based on ES2015+ and does not support very old browsers (e.g., older versions of IE).

Use the following commands to build the project for different environments or to preview the production build.

# Build for staging environment
npm run build:stage

# Build for production environment
npm run build:prod

# Preview the production build effect
npm run preview

# Preview production build with static resource analysis
npm run preview -- --report

Use the following commands to build the project for specific deployment environments. Note that the current v4.0+ versions are built using vue-cli.

# build for test environment
npm run build:stage

# build for production environment
npm run build:prod

Follow these steps to set up the project locally.

Prerequisites:

• Node.js
• Git

Important Note on Installation: It is highly recommended not to use cnpm for installation as it may cause unexpected bugs. If you encounter slow download speeds with npm, use the Taobao registry instead.

Setup Steps:

1. Clone the repository.
2. Enter the project directory.
3. Install dependencies.
4. Start the development server.

# Clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# Enter the project directory
cd vue-element-admin

# Install dependencies (use registry flag if npm is slow)
npm install --registry=https://registry.npm.taobao.org

# Start the service
npm run dev

Use the following commands to build the project for specific deployment environments. This project supports multi-environment construction including development, SIT, stage, and production.

# Construcción para entornos de prueba
npm run build:stage

# Construcción para entornos de producción
npm run build:prod

To get started with a local development environment, clone the repository, install the dependencies using npm, and run the development server. The application will automatically open at http://localhost:9527.

# clone el proyecto
git clone https://github.com/PanJiaChen/vue-element-admin.git

# vaya al directorio clonado
cd vue-element-admin

# instale las dependencias
npm install

# corra el proyecto como desarrollador
npm run dev

Before using vue-element-admin, ensure you have Node.js and Git installed. The project is built on the following stack:

• Core: Vue, Vuex, Vue-router, Vue-cli
• UI: Element-UI
• HTTP: Axios
• Data Simulation: Mock.js (used for all request data)
• Language: ES2015+